html th table-fixed,CSS技巧：table-layout: fixed固定表格局

CSS技巧：table-layout: fixed固定表格局

让表table布局更加符合预期，普通使用table时，其table-layout 默认值是 auto，导致表格第二行和第一行不一样宽，也就是两行的宽度不对齐。而使用：

table { table-layout: fixed; }

则会让表的布局以第一行为准，设置表格的宽度，然后其他行的表格宽度就按照第一行为准。一般表格第一行是表头标题，第二行以后是数据行，也就是让数据行的每列宽度向第一行列宽度看齐。

这种样式的表格布局在性能上也快得多，这是因为整个表格的内容不需要花费进行分析，以便知道列的宽度。

案例：Html

IDNameJobEmail

0001Johnny FiveRobotin'need@input.com0002Super SuperlonglastnamesmithDoin' stuffdoing@stuff.com

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%;

}

效果如下：