Доброго времени суток всем. Сразу скажу, что написать этот топик меня заставило отчаяние, потому что весь нэт перерыл, НО ни то, чтоб ответов не нашёл по данной проблеме, а не нашёл подходящего решения ((
Суть проблемы:
Есть (например) таблица из 5 строк 3 столбцов (в реале конечно больше и того и другого), верстка ниже. Есть 3 переключателя, каждый из которых скрывает соответствующий столбец (как именно - опять же ниже).
В соответствии с моей вёрсткой (см. стили) все 3 столбика должны растягиваться по ширине (!) всей таблицы, и после клика на каком-нить переключателе и скрытия столбика, оставшиеся должны также растягиваться и занимать место скрытого столбца, что и происходит в:
- IE 7,
- Opera 9+
- FireFox 3+
НО ни в IE 8 
Кроме того, если вручную при верстке HTML добавить к ячейкам столбика, который хотим скрыть, style="display:none" или class="no" (в стилях прописан как td.no {display:none;},
то 2 оставшихся столбика растягиваются как надо в том же самом IE 8
Если IE 8 в режиме совместимости с IE 7 - всё путём ))
Пример:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<!--<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> использовал как вариант решения траблы -->
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>javascript</title>
<style type="text/css">
/* эти стили взяты и минимизированы с одного из моих сайтов
но суть проблемы 100% ни в них, поэтому даже и не копайтесь */
body { margin:0px; }
html,body { height:100%; margin:0px; padding:0px; }
html>body { font-size: small; }
#container { width:1024px; max-width:1024px; position:relative; margin:0 auto; padding:0; min-height:100%; border:1px solid #ccc;}
* html #container{ height:100%; }
/* стили для видимых ячеек: длина должна быть указана обязательно - требование к сайту )) */
td { width:75px; border:1px solid #CCCCCC;}
/* юзаем как вариант скрытия ячеек, он же и для демонстрации того, что без JavaScript в IE8 всё ОК*/
td.no { display:none; }
/* таблица с флажками - тоже формальность, можно и в div*/
#table_filter {background: #CCCCFF;}
/* это важный стиль для нашей таблицы*/
#table {width:1024px; table-layout:fixed; max-width:1024px;}
</style>
<script type="text/javascript">
function toggle_column(column_nr) {
var table = document.getElementById('table');
var rows = table.getElementsByTagName('tr');
for (var row=0; row<rows.length;row++) {
cels = rows[row].getElementsByTagName('td');
/* вот здесь что только не пробовал: разные варианты...*/
cels[column_nr].className="no";
//cels[column_nr].style.display="none";
//cels[column_nr].setAttribute('style','display:none;');
}
}
</script>
</head>
<body>
<div id="container">
<table border="1" id="table_filter">
<tr>
<td><input name="column_0" type="checkbox" value="0" onClick="toggle_column(this.value);" checked />thirst</td>
<td><input name="column_1" type="checkbox" value="1" onClick="toggle_column(this.value);" checked />second</td>
<td><input name="column_2" type="checkbox" value="2" onClick="toggle_column(this.value);" checked />third</td>
</tr>
</table>
<table border="0" id="table">
<tr>
<td>0 1</td>
<td>0 2</td>
<td>0 3</td>
<td class="no">0 4</td>
</tr>
<tr>
<td>1 1</td>
<td>1 2</td>
<td>1 3</td>
<td class="no">1 4</td>
</tr>
<tr>
<td>2 1</td>
<td>2 2</td>
<td>2 3</td>
<td class="no">2 4</td>
</tr>
<tr>
<td>3 1</td>
<td>3 2</td>
<td>3 3</td>
<td class="no">3 4</td>
</tr>
<tr>
<td>4 1</td>
<td>4 2</td>
<td>4 3</td>
<td class="no">4 4</td>
</tr>
<tr>
<td>5 1</td>
<td>5 2</td>
<td>5 3</td>
<td class="no">5 4</td>
</tr>
</table>
</div>
</body>
</html>
Вот такая вот фигня (( Сразу добавлю, что ссылки на "схожую проблему" скидывать не нужно. Есть конкретный баг IE8 - напишите плз конкретное решение, если у Вас оно найдётся
Возможно проблема и в <!DOCTYPE >, и в #table {width:1024px; table-layout:fixed; max-width:1024px;}, и в том, что ширина задана конкретно для всех ячеек... но перепробовал уже что только можно!!! И пришёл к выводу (с учётом всех нэтовских топиков с Хабра, СтэкОверфлоу, данного форума), что всё-таки
баг в кривом динамическом изменении display:none у нашего любимого Ослика 8