html固定单元格位置,固定表格布局

在CSS trick上看到这篇关于表格布局的文章，还没了解过这个属性，读下来感觉挺有用的，会英文的朋友欢迎阅读原文：fixed table layouttable{ table-layout:fixed;}

默认的table-layout是auto，布局看起来很奇怪，当内容和长度超出表格宽度时，则会撑出来。当外层宽度小于表格内容时，则会出现滚动条。

table-layout:fixed布局则看起来更加的友好的。

使用这个fixed的布局是基于第一行，通过设置他们的宽度，接下来的内容都是跟随着变化的。

几点优点

内容可以通过CSS overflow:hidden;和text-overflow:ellipsis;来隐藏

超出内容在一个td内可以通过设置overflow:auto来滚动查看。

当缩小网页的窗口时，表格不会因为内容而撑出来，而是在设定的比例内隐藏，可用于自适应设计中

使用案例

上面的标题当超出规定的宽度时会自动隐藏起来，不会撑出来。

实际的HTML和CSS

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;

}

/* 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。具体使用跟下面这个案例类似：