IE7 делает мою жизнь скудной! Получение разрывов между столбцами таблицы HTML (w/colspan) с переключателем CSS
Скопировать/вставить этот отрывок HTML-кода и испытывает его в IE7. При переключении скрытых столбцов, это оставляет разрыв между столбцами. В Firefox это хорошо работает, касание столбцов при уменьшении. Еще не попробовали IE8, было бы любопытно услышать, как он работает там. Какие-либо идеи? Я попробовал набор вещей в CSS как таблица-layout:fixed, но никакая удача.
Примечание: Поиск другого метода переключения, потому что таблица я действительно имею дело с, равняется 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 ответа
Вот решение, которое использует 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>
Пока нет объяснения, почему IE делает это, но вот что происходит и как это обойти.
1) Если вы установите класс таблицы на 'hide1 hide2' в html, то таблица будет отображаться правильно (без пробелов). Таким образом, проблема, по-видимому, связана с тем, как IE обрабатывает изменения в таблице с помощью стилей.
2) Промежуток между столбцами равен ширине заголовка составного столбца.
3) Если вы исключите охват столбцов (и лишние столбцы), все будет работать нормально.
Я нашел два обходных пути. Первый - использовать код для переключения дисплея, но вы отклонили этот вариант.
Альтернативой является устранение колпанов. Это можно сделать разными способами. Один из них - преобразовать группу ячеек, которые необходимо объединить, во встроенную таблицу (то есть вместо двух элементов TD у вас будет один TD, который содержит ТАБЛИЦУ с одним TR и двумя TD). Или вы можете использовать SPAN для более чистого кода (например, с BORDER-RIGHT для всех ячеек, кроме последней).
Попробуйте это объявление типа документа:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">