CSS - table-layout 属性



CSS table-layout 属性允许浏览器通过使用它在列的其余部分遇到的第一个宽度属性来加快表的布局,而不必在呈现之前加载整个表。

可能的值

  • auto − 表格应根据某种自动布局算法进行布局。浏览器将根据列和单元格的内容计算其宽度。
  • fixed − 表格应根据提供的固定表格布局方法进行布局。

适用于

所有元素都显示为表格或内联表格。

DOM 语法


object.style.tableLayout = "fixed";

例子


<html>
<head>
<style>
	 table.auto {
	 	 table-layout: auto;
	 	 border-collapse: collapse;
	 }
	 	 table.fixed {
	 	 table-layout: fixed;
	 	 border-collapse: separate;
	 }
</style>
</head>
<body>
	 <div>
	 	 <h2>table-layout: auto</h2>
	 	 <table class = "auto" border = "1" width = "100%">
	 	 	 <tr>
	 	 	 <td>1000000000000000000000000000</td>
	 	 	 <td>10000000</td>
	 	 	 <td>100</td>
	 	 	 </tr>
	 	 	 </table>
	 	 	 </div>
	 	 	 <div>
	 	 	 <h2>table-layout: fixed</h2>
	 	 	 <table class = "fixed" border = "1" width = "100%">
	 	 	 <tr>
	 	 	 <td>1000000000000000000000000000</td>
	 	 	 <td>10000000</td>
	 	 	 <td>100</td>
	 	 	 </tr>
	 	 </table>
	 </div>
</body>
</html>