TD列宽度值不适用于固定表格布局

Question

我有以下表结构:

<table class="tableStyle">
<tr>
    <td width="20px">col1</td>
    <td width="50px">col2</td>
    <td width="50px">col3</td>
    <td width="15px">col4</td>
    <td width="25px">col5</td>
    <td width="20px">col6</td>
    <td width="20px">col7</td>
    <td width="20px">col8</td>
</tr>
</table>

CSS类定义是:

.tableStyle{
table-layout:fixed;
margin: 0 auto; width: 960px;
}

问题是所有列都以相等的宽度显示,尽管我明确定义了每个列的宽度.

为什么以上宽度值不起作用？有什么建议使它适用于固定的表格布局？

Answer 1

你必须使用:

<td width="20">

要么

<td style="width: 20px">

Answer 2

"古老" width属性不是一个单位,它期望类似的东西width="20".

但是,定义表的"最正确"方式如下:

<table>
    <colgroup>
        <col style="width:20px" />
        <col style="width:50px" span="2" />
        <col style="width:15px" />
        <col style="width:25px" />
        <col style="width:20px" span="3" />
    </colgroup>
    <tbody>
        <tr>
            <td>col1</td>
            <td>col2</td>
            <td>col3</td>
            <td>col4</td>
            <td>col5</td>
            <td>col6</td>
            <td>col7</td>
            <td>col8</td>
        </tr>
    </tbody>
</table>

这对于大型表尤其有效,因为浏览器只需要读取<colgroup>元素就可以准确了解整个表的布局方式,而无需根据单个单元格样式计算宽度.