IE7 делает мою жизнь несчастной! Получение пробелов между столбцами таблицы html (w / colspan) с помощью CSS-переключателя

скопируйте / вставьте этот фрагмент кода html и попробуйте его в IE7. При переключении скрытых столбцов он оставляет зазор между столбцами. В Firefox он отлично работает, столбцы касаются при минимизации. Еще не пробовал IE8, было бы любопытно услышать, как он там работает. Есть идеи? Я пробовал кучу вещей в CSS, таких как table-layout:исправлено, но не повезло.

Примечание: не ищет другой метод переключения, потому что таблица, с которой я действительно имею дело, имеет ширину 50 + столбцов и 4000 + строк, поэтому методы цикла / jquery слишком медленные.

вот код - если кто-то может повторно опубликовать его рабочую версию, я немедленно дам им чек и навсегда останусь у вас в долгу!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script>
function toggle() {
   var tableobj = document.getElementById("mytable");
   if (tableobj.className == "") {
      tableobj.className = "hide1 hide2";
   }
   else {
      tableobj.className = "";
   }
}
</script>
<style>
   table { border-collapse: collapse; }
   td, th { border: 1px solid silver; }
   .hide1 .col1 { display: none; }
   .hide2 .col2 { display: none; }
</style>
</head>
<body>
<input type="button" value="toggle" onclick="toggle();" />
<table id="mytable">
<tr>
   <th>A</th>
   <th colspan="2">B</th>
   <th colspan="2" class="col1">B1</th>
   <th colspan="2">C</th>
   <th colspan="2" class="col2">C1</th>
</tr>
<tr>
   <td>123</td>
   <td>456</td>
   <td>789</td>
   <td class="col1">123</td>
   <td class="col1">456</td>
   <td>789</td>
   <td>123</td>
   <td class="col2">456</td>
   <td class="col2">789</td>
</tr>
</table>
</body>
</html>
6
css html html-table internet-explorer-7 javascript

3 ответов

вот решение, которое использует JQuery для переключения заголовков столбцов (см. Мой другой ответ для обоснования). Помимо материала JQuery, остальная часть html-страницы одинакова.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js"  type="text/javascript"></script>    

<script>
function toggle() {
   var tableobj = document.getElementById("mytable");
   if (tableobj.className == "") {
      tableobj.className = "hide1 hide2";
      $('th[class^=col]').hide();
   }
   else {
      tableobj.className = "";
      $('th[class^=col]').show();
   }
}
</script>
<style>
   table { border-collapse: collapse; }
   td, th { border: 1px solid silver; }
   .hide1 .col1 { display: none; }
   .hide2 .col2 { display: none; }
</style>
</head>
<body>
<input type="button" value="toggle" onclick="toggle();" />
<table id="mytable">
<tr>
   <th>A</th>
   <th colspan="2">B</th>
   <th colspan="2" class="col1">B1</th>
   <th colspan="2">C</th>
   <th colspan="2" class="col2">C1</th>
</tr>
<tr>
   <td>123</td>
   <td>456</td>
   <td>789</td>
   <td class="col1">123</td>
   <td class="col1">456</td>
   <td>789</td>
   <td>123</td>
   <td class="col2">456</td>
   <td class="col2">789</td>
</tr>
</table>
</body>
</html>
2

пока нет объяснения того, почему IE делает это, но вот что происходит, и вот как это обойти.

1) Если вы установите класс таблицы в "hide1 hide2" в html, то таблица будет отображаться правильно (без пробелов). Поэтому проблема, похоже, связана с тем, как IE обрабатывает изменения в таблице через стили.

2) зазор между столбцами-это ширина заголовка охватываемого столбца.

3) Если вы исключаете охват столбца (и дополнительные столбцы), тогда все работает нормально.

Я нашел два способа решения. Первый-использовать код для переключения дисплея, но вы отклонили этот вариант.

альтернативой является устранение colspans. Есть множество способов сделать это. Один из них заключается в преобразовании группы ячеек во встроенную таблицу (то есть вместо двух элементов TD у вас будет один TD, который содержит таблицу с одним TR и двумя TDs). Или вы можете использовать пяди для уборщика код (с, скажем, границей-правом для всех ячеек, кроме последней).

1

попробуйте это объявление doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
0