固定表格布局

文章目录

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.

几点优点

  1. 内容可以通过CSS overflow:hidden;text-overflow:ellipsis;来隐藏
  2. 超出内容在一个td内可以通过设置overflow:auto来滚动查看。
  3. 当缩小网页的窗口时,表格不会因为内容而撑出来,而是在设定的比例内隐藏,可用于自适应设计中

使用案例

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

实际的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。具体使用跟下面这个案例类似:

原创文章:固定表格布局 ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/fixed-table-layout.html)
评论已关闭。

“固定表格布局”有3个评论

  1. 链接通知 : 20个很有用的CSS技巧 – bless前端博客
  2. 链接通知 : 【转】20个很有用的CSS技巧 | 大志设计
  3. 源泉

    codepen,好东西,学习了!

    登录回复