css - 在 `tr`中添加足够宽的textarea会影响 `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 会影响列宽？我怎样才能避免这种影响？

附言 我在 JSFiddle 上重现了这个问题，这是链接:http://jsfiddle.net/7mYY8/1/

Answer 1

那么，您有 6 列，其中 5 列具有定义的宽度。

第一列没有。这意味着它必须被计算。当然，您在 CSS 中定义了表格宽度，但 IE 6 并不是最好的选择。

最好的办法是明确定义所有标题列的宽度。然后给表格赋予“table-layout: fixed”的css属性。这将在整个表格呈现中强制使用您的宽度。