我有以下表结构：
<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>元素,以确切知道如何布局整个表,而无需根据单个单元格样式计算宽度.
