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

我有以下表结构：

<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;
}

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

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

解决方法

“古老”宽度属性不占用单位,它需要宽度=“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>元素,以确切知道如何布局整个表,而无需根据单个单元格样式计算宽度.