在CSS trick上看到这篇关于表格布局的文章，还没了解过这个属性，读下来感觉挺有用的，会英文的朋友欢迎阅读原文：fixed table layout
table{ table-layout:fixed;}默认的table-layout是auto，布局看起来很奇怪，当内容和长度超出表格宽度时，则会撑出来。当外层宽度小于表格内容时，则会出现滚动条。
See the Pen Default Tables are Weird. by Chris Coyier (@chriscoyier) on CodePen.
而是用table-layout:fixed布局则看起来更加的友好的。
使用这个fixed的布局是基于第一行，通过设置他们的宽度，接下来的内容都是跟随着变化的。
See the Pen Fixed Tables Solve Some Issues by kujian (@kujian) on CodePen.
几点优点
- 内容可以通过CSS
overflow:hidden;和text-overflow:ellipsis;来隐藏 - 超出内容在一个td内可以通过设置
overflow:auto来滚动查看。 - 当缩小网页的窗口时，表格不会因为内容而撑出来，而是在设定的比例内隐藏，可用于自适应设计中
使用案例
上面的标题当超出规定的宽度时会自动隐藏起来，不会撑出来。
实际的HTML和CSS
<table class="users">
<thead>
<tr>
<th class="row-1 row-ID">ID</th>
<th class="row-2 row-name">Name</th>
<th class="row-3 row-job">Job</th>
<th class="row-4 row-email">Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>0001</td>
<td>Johnny Five</td>
<td>Robotin'</td>
<td>need@input.com</td>
</tr>
<tr>
<td>0002</td>
<td>Super Superlonglastnamesmith</td>
<td>Doin' stuff</td>
<td>doing@stuff.com</td>
</tr>
</tbody>
</table>
CSS代码：
.users {
table-layout: fixed;
width: 100%;
white-space: nowrap;
}
.users td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Column widths are based on these cells */
.row-ID {
width: 10%;
}
.row-name {
width: 40%;
}
.row-job {
width: 30%;
}
.row-email {
width: 20%;
}See the Pen xFcrp by Chris Coyier (@chriscoyier) on CodePen.
布局速度
这种使用fixed的布局，由于不需要计算表格的宽度，可能是最快的。
邮件方面
table-layout这个属性是跨浏览器的。
扩展阅读
表格用得最多的是数据列表，不适合用于网页布局。在Bootstrap前端开发框架，发现一个就是按钮自适应长度使用到了table-layout:fixed这个CSS。具体使用跟下面这个案例类似：
