Добавление достаточно широкой текстовой области в `tr` влияет на вычисление ширины` td`?

Question

У меня есть структура DOM, подобная следующей:

<table class="playlist">
    <thead>
        <tr>
            <th>TH1</th>
            <th width="53">TH2</th>
            <th width="53">TH3</th>
            <th width="53">TH4</th>
            <th width="53">TH5</th>
            <th width="53">TH6</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>TD1</td>
            <td>TD2</td>
            <td>TD3</td>
            <td>TD4</td>
            <td>TD5</td>
            <td>TD6</td>
        </tr>

        <tr class="expansion">
            <td class="expansion" colspan="6">
                <div class="comment_wrapper">
                    <form>
                        <textarea style="width=482px" class="mini">x</textarea>
                    </form>
                </div>
            </td>
        </tr>
    </tbody>
</table>

Связанные правила стиля похожи на:

table {
    width: 580px;
    border-bottom: 1px solid #EEE;
}

.comment_wrapper {
height: 270px;
border: 1px red solid;
overflow-x: hidden;
overflow-y: auto;
}

.comment_wrapper form textarea {
height: 70px;
width: 482px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border: 1px red solid;
}

Моя проблема заключается в том, что всякий раз, когда я добавляю второй tr, ширинастолбцы таблицы превратились в беспорядок, как показано ниже в IE6 / 7.

Когда я закомментирую это tr, восстановление ширины столбца.

Почему добавление tr влияет на ширину столбца?Как можно избежать этого эффекта?

PS Я воспроизвел эту проблему на JSFiddle, и это ссылка: http://jsfiddle.net/7mYY8/1/

Answer 1

Ну, у вас есть 6 столбцов, 5 из которых имеют определенную ширину.

1-й столбец - нет. Это означает, что это должно быть вычислено. Конечно, у вас есть ширина таблицы, определенная в CSS, но IE 6 - не самая лучшая вещь.

Лучшим вариантом будет явное определение ширины всех столбцов заголовка. Затем присвойте таблице атрибут css «table-layout: fixed». Это обеспечит вашу ширину для всей визуализации таблицы.