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

前端之家收集整理的这篇文章主要介绍了html – TD列宽度值不适用于固定的表格布局前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有以下表结构:
  1. <table class="tableStyle">
  2. <tr>
  3. <td width="20px">col1</td>
  4. <td width="50px">col2</td>
  5. <td width="50px">col3</td>
  6. <td width="15px">col4</td>
  7. <td width="25px">col5</td>
  8. <td width="20px">col6</td>
  9. <td width="20px">col7</td>
  10. <td width="20px">col8</td>
  11. </tr>
  12. </table>

CSS类定义是:

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

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

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

解决方法

“古老”宽度属性不占用单位,它需要宽度=“20”.

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

  1. <table>
  2. <colgroup>
  3. <col style="width:20px" />
  4. <col style="width:50px" span="2" />
  5. <col style="width:15px" />
  6. <col style="width:25px" />
  7. <col style="width:20px" span="3" />
  8. </colgroup>
  9. <tbody>
  10. <tr>
  11. <td>col1</td>
  12. <td>col2</td>
  13. <td>col3</td>
  14. <td>col4</td>
  15. <td>col5</td>
  16. <td>col6</td>
  17. <td>col7</td>
  18. <td>col8</td>
  19. </tr>
  20. </tbody>
  21. </table>

这对于大型表尤其有用,因为浏览器只需要读取< colgroup>元素,以确切知道如何布局整个表,而无需根据单个单元格样式计算宽度.

猜你在找的HTML相关文章