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