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

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

6 голосов
/ 20 мая 2010

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

Примечание. Не ищите другой метод переключения, потому что таблица, с которой я на самом деле имею дело, имеет ширину 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>

Ответы [ 3 ]

2 голосов
/ 20 мая 2010

Вот решение, которое использует 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>
1 голос
/ 20 мая 2010

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

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

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

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

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

Альтернатива заключается в устранении кольспанов. Есть множество способов сделать это. Одним из них является преобразование группы ячеек, которые должны быть объединены во встроенную таблицу (то есть вместо двух элементов TD у вас будет один TD, который содержит таблицу с одним TR и двумя TD). Или вы можете использовать SPAN для более чистого кода (скажем, с ПРАВОЙ ГРАНИЦЕЙ для всех ячеек, кроме последней).

0 голосов
/ 20 мая 2010

Попробуйте это объявление типа документа: 

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