Javascript-форум - IE 8: баг при динамическом display=none; у ячеек таблицы

Доброго времени суток всем. Сразу скажу, что написать этот топик меня заставило отчаяние, потому что весь нэт перерыл, НО ни то, чтоб ответов не нашёл по данной проблеме, а не нашёл подходящего решения ((

Суть проблемы:
Есть (например) таблица из 5 строк 3 столбцов (в реале конечно больше и того и другого), верстка ниже. Есть 3 переключателя, каждый из которых скрывает соответствующий столбец (как именно - опять же ниже).

В соответствии с моей вёрсткой (см. стили) все 3 столбика должны растягиваться по ширине (!) всей таблицы, и после клика на каком-нить переключателе и скрытия столбика, оставшиеся должны также растягиваться и занимать место скрытого столбца, что и происходит в:

IE 7,
Opera 9+
FireFox 3+

НО ни в IE 8 :blink:

Кроме того, если вручную при верстке 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 - напишите плз конкретное решение, если у Вас оно найдётся :victory:

Возможно проблема и в <!DOCTYPE >, и в #table {width:1024px; table-layout:fixed; max-width:1024px;}, и в том, что ширина задана конкретно для всех ячеек... но перепробовал уже что только можно!!! И пришёл к выводу (с учётом всех нэтовских топиков с Хабра, СтэкОверфлоу, данного форума), что всё-таки баг в кривом динамическом изменении display:none у нашего любимого Ослика 8