HTML DOM tableLayout 属性

定义和用法

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

固定表格布局：

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

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

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

自动表格布局：

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

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

语法：

  1. Object.style.tableLayout=automatic|fixed

可能的值

值 描述
automatic 默认。列宽度由单元格内容设定。
fixed 列宽由表格宽度和列宽度设定。

实例

本例设置固定表格布局：

  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function setFixedTableLayout()
  5. {
  6. document.getElementById('myTable').style.tableLayout="fixed";
  7. }
  8. </script>
  9. </head>
  10. <body>
  11.  
  12. <table id="myTable" border="1" width="100%">
  13. <col width="20%"><col width="40%"><col width="40%">
  14. <tr>
  15. <td>1000000000000000000000000000</td>
  16. <td>10000000</td>
  17. <td>100</td>
  18. </tr>
  19. </table>
  20.  
  21. <input type="button" onclick="setFixedTableLayout()"
  22. value="Set fixed table layout">
  23.  
  24. </body>
  25. </html>