关于table-layout的用法

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

 

自动表格布局:auto(默认)

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

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

 

固定表格布局: fixed

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

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

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

 

 

直接上代码

<html>
<head>
<style type="text/css">
	table.one{table-layout: automatic}
	table.two{table-layout: fixed}
</style>
</head>
<body>
<table class="one" border="1" width="100%">
	<tr>
		<td width="20%">1000000000000000000000000000</td>
		<td width="40%">10000000</td>
		<td width="40%">100</td>
	</tr>
</table>

<br />

<table class="two" border="1" width="100%">
	<tr>
		<td width="20%">1000000000000000000000000000</td>
		<td width="40%">10000000</td>
		<td width="40%">100</td>
	</tr>
</table>
</body>
</html>

  

  

 

posted @ 2018-03-01 15:33  人在路途  阅读(573)  评论(0编辑  收藏  举报