table-layout CSS属性定义了用于布局表格单元格,行和列的算法。
初始值为auto //大多数浏览器采用自动表格布局算法对表格布局。表格及单元格的宽度取决于其包含的内容。
fixed://表格和列的宽度通过表格的宽度来设置,某一列的宽度仅由该列首行的单元格决定。在当前列中,该单元格所在行之后的行并不会影响整个列宽。
使用场景
当用table百分比布局时, 如果td中的内容超过了td设定的宽度时想用三个点的省略号显示,常规的写法就是用css中的一些属性比如
```
<style>
td {overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
</style>
```
不起作用时,如果在table的css样式上加table-layout:fixed
```
<html>
 <head>
 <style type="text/css">
 table.one
 {
  
 table-layout: automatic
 }
 table.two
 {
  
 table-layout: fixed
 }
 td{
  
     overflow: hidden;
     white-space:nowrap;
     text-overflow:ellipsis;
     
 }
 </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>
```