<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表格布局</title>
<style>
table.one{
/*自动表格布局*/
table-layout: auto
}
table.two{
/*固定表格布局*/
table-layout: fixed
}
table.two td{
overflow:hidden;
text-overflow:ellipsis;
background: goldenrod;
white-space: nowrap;
}
</style>
</head>
<body>
<table class="one" border="1" width="50%">
<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="50%">
<tr>
<td width="20%">1000000000000000000000000000</td>
<td width="40%">10000000</td>
<td width="40%">100</td>
</tr>
</table>
<!--定义和用法-->
<!--tableLayout 属性用来显示表格单元格、行、列的算法规则。-->
<!--固定表格布局：-->
<!--固定表格布局与自动表格布局相比，允许浏览器更快地对表格进行布局。-->
<!--在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。-->
<!--通过使用固定表格布局，用户代理在接收到第一行后就可以显示表格。-->
<!--注意：要同时指定表格宽度，和列宽度，该布局才有效果。-->
<!--自动表格布局：-->
<!--在自动表格布局中，列的宽度是由列单元格中没有折行的最宽的内容设定的。-->
<!--此算法有时会较慢，这是由于它需要在确定最终的布局之前访问表格中所有的内容。-->
</body>
</html>效果图：