CSS table-layout 属性

CSS table-layout 属性定义了用于布局表格单元格,行和列的算法。


实例

设置表格布局算法:

  1. <html>
  2. <head>
  3. <style type="text/css">
  4. table.one
  5. {
  6. table-layout: automatic
  7. }
  8. table.two
  9. {
  10. table-layout: fixed
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <table class="one" border="1" width="100%">
  16. <tr>
  17. <td width="20%">1000000000000000000000000000</td>
  18. <td width="40%">10000000</td>
  19. <td width="40%">100</td>
  20. </tr>
  21. </table>
  22. <br>
  23. <table class="two" border="1" width="100%">
  24. <tr>
  25. <td width="20%">1000000000000000000000000000</td>
  26. <td width="40%">10000000</td>
  27. <td width="40%">100</td>
  28. </tr>
  29. </table>
  30. </body>
  31. </html>

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

属性
table-layout14.05.01.01.07.0

定义和用法

table-layout 属性用来显示表格单元格、行、列的算法规则。

固定表格布局:

固定表格布局与自动表格布局相比,允许浏览器更快地对表格进行布局。

在固定表格布局中,水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距,而与单元格的内容无关。

通过使用固定表格布局,用户代理在接收到第一行后就可以显示表格。

自动表格布局:

在自动表格布局中,列的宽度是由列单元格中没有折行的最宽的内容设定的。

此算法有时会较慢,这是由于它需要在确定最终的布局之前访问表格中所有的内容。

说明

该属性指定了完成表布局时所用的布局算法。固定布局算法比较快,但是不太灵活,而自动算法比较慢,不过更能反映传统的 HTML 表。

默认值:auto
继承性:yes
版本:CSS2
JavaScript 语法:object.style.tableLayout="fixed"

可能的值

描述
automatic默认。列宽度由单元格内容设定。
fixed列宽由表格宽度和列宽度设定。
inherit规定应该从父元素继承 table-layout 属性的值。

相关页面

CSS 教程:CSS 表格

分类导航