CSS技巧：table-layout: fixed固定表格局
让表table布局更加符合预期，普通使用table时，其table-layout 默认值是 auto，导致表格第二行和第一行不一样宽，也就是两行的宽度不对齐。而使用：
table { table-layout: fixed; }
则会让表的布局以第一行为准，设置表格的宽度，然后其他行的表格宽度就按照第一行为准。一般表格第一行是表头标题，第二行以后是数据行，也就是让数据行的每列宽度向第一行列宽度看齐。
这种样式的表格布局在性能上也快得多，这是因为整个表格的内容不需要花费进行分析，以便知道列的宽度。
案例：Html
<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;
}
/* 表的列宽度将基于这个几个元素设置 */
.row-ID {
width: 10%;
}
.row-name {
width: 40%;
}
.row-job {
width: 30%;
}
.row-email {
width: 20%;
}
效果如下：
