Aitter's Blog

使用 colgroup 和 col 实现响应式表格

Table 在项目使用中十分频繁,特别是在后台管理系统中,table 无疑是数据展示的第一公民,在早些年的网页中,table 也是网页布局的第一选择,然后使用好 table 并不容易,其它有很多子元素和属性需要了解,在实际使用中,table 的自适应也十分重要,如果使用不当,就会导致数据展示混乱,影响用户阅读体验,table 可以说是一把利刃,只要使用恰当,可以简化 DOM 结构,减少很多样式编写,提升布局效率。

基础知识

表格的结构

table(summary)
caption
colgroup(width span)
col(width)
thead
tr > th(colspan rowspan)
tbody
tr > td(colspan rowspan)
tbody
tr > td(colspan rowspan)
tfoot
tr > td(colspan rowspan)

说明

  • summary 用于对描述表格
  • caption 用于显示表格标题
  • colgroup & col 用于控制列的样式
  • theadtfoot 在一张表中都只能有一个,而 tbody 可以有多个
  • tfoot 必须出现在 tbody 前面,这样浏览器在接收主体数据之前,就能渲染表尾,有利于加快表格的显示速度。这一点对大型表格尤其重要
  • theadtbodytfoot 里面都必须使用 tr 标签

单元格合并

单元格竖向合并 rowspan
单元格横向合并 colspan

常用于特殊的表格数据展示,如订单列表、表单详情展示等
屏幕快照 2017-11-17 上午10.20.35

列的样式

colgroup & col

定义

<colgroup> 定义表格列的组。通过此标签,您可以对列进行组合,以便格式化。该元素只有在 <table> 中才是合法的。

  • 为表格列添加列的样式,并不能创建列
  • 对表格中的列进行组合,以便对其进行格式化
  • 唯一属性 span: 规定列组应该横跨的列数
  • 只能在 <table> 元素之内,在任何一个 <caption> 元素之后,在任何一个 <thead><tbody><tfoot><tr> 元素之前使用

colgroup 与 col的区别及关系

  • <colgroup> 用于设置表格中 多列 的样式,闭合标签
  • <col> 用于设置表格中 单列 的样式,单标签
  • <colgroup> 元素只能包含 <col> 元素
  • <colgroup> 元素无法创建表格列,只用于控制列的样式

实现列的斑马纹

<table>
<col class="col1"></col>
<col class="col1"></col>
<col class="col1"></col>
<col class="col1"></col>
<col class="col1"></col>
<thead></thead>
<tbody></tbody>
</table>
.col1:nth-child(2n) {
background: #F8F8F9;
}
.col1:nth-child(2n+1){
background: #E5ECFB;
}

屏幕快照 2017-11-17 上午10.17.40

给多列分组

<table class="table">
<col>
<col>
<colgroup class="group1" span="2"></colgroup>
<col>
<colgroup class="group1" span="3"></colgroup>
<col>
<colgroup class="group1" span="1"></colgroup>
<thead></thead>
<tbody></tbody>
</table>

屏幕快照 2017-11-17 上午10.19.09

列的样式控制

给 col 添加样式 widthbackgroundborder
设置 color、font-size、text-align、min-width、max-width等无效

屏幕快照 2017-11-17 上午10.19.22

使用百分比控制列的宽度

<table>
<colclass="col3" width="10%">
<col class="col3" width="30%">
<col class="col3" width="20%">
<col class="col3" width="10%">
<col class="col3" width="20%">
<col class="col3" width="10%">
<thead></thead>
<tbody></tbody>
</table>

屏幕快照 2017-11-17 上午10.19.34

使用固定宽度及自适应宽度

<table>
<col class="col3" width="100">
<col class="col3" width="300">
<col class="col3">
<col class="col3" width="100">
<col class="col3">
<col class="col3" width="100">
<thead></thead>
<tbody></tbody>
</table>

屏幕快照 2017-11-17 上午10.19.43

使用 colcolgroup 定义列的宽度自适应是最灵活的方式,但是对于浏览器来说,自适应的列会导致渲染的复杂度上升,降低渲染效率,所以css提供了一种渲染效率更高的样式属性 table-layout:fixed

table-layout

为表设置表格布局算法

table {
table-layout: fixed;
}
属性 描述
auto 默认 列宽度由单元格内容设定
fixed 列宽由表格宽度和列宽度设定
inherit 规定应该从父元素继承 table-layout 属性的值

auto

大多数浏览器采用自动表格布局算法对表格布局。
表格及单元格的宽度取决于其包含的内容。
此算法有时会较慢,这是由于它需要在确定最终的布局之前访问表格中所有的内容。
微软公司声称使用这个命令,表格的显示速度可以加快100倍。

为了加快表格显示,最好事先就在CSS(或者table标签的width和height属性)中指定表格的宽度和高度。)

fixed

表格和列的宽度通过表格的宽度来设置,某一列的宽度仅由该列首行的单元格决定。在当前列中,该单元格所在行之后的行并不会影响整个列宽。

使用 fixed 布局方式时,整个表格可以在其首行被下载后就被解析和渲染。这样对于 automatic 自动布局方式来说可以加速渲染,但是其后的单元格内容并不会自适应当前列宽

任何一个包含溢出内容的单元格可以使用 overflow 属性控制是否允许内容溢出 或者 使用 word-break:break-all 使内容换行

屏幕快照 2017-11-17 上午10.19.54

fixed + break-all

fixed布局带来的问题是单元格内容较长,英文或数字中间没有空格,是一连串的数字编码或字符时,不会换行,会溢出,所以加上 word-break: break-all 强制其换行显示

<table style="table-layout:fixed; word-break: break-all;"></table>

屏幕快照 2017-11-17 上午10.20.09

fixed + 不换行…显示

fixed + break-all 解决了字符换行的问题,但是如果内容过长,容易撑高行的高度,导致表格某几行或所有行的高度过高,致表格变形,影响阅读体验,所以可以让过长的内容以 ... 显示

<table style="table-layout:fixed;"></table>

为内容过长的 td 添加样式 .ell

.ell {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

屏幕快照 2017-11-17 上午10.20.19

fixed + 多行 … 显示 【推荐】

如果单行…显示,可以保证所有行的高度一致,但当内容较多时,只能显示少量信息,也不利于阅读体验, 这样就需要单元格内容显示多行,超过规定行数再以 ... 显示

<table style="table-layout:fixed;"></table>

为单元格内容添加 mult-ell-3 的样式,当内容多行三行时显示 ..., 并设置title属性,鼠标悬停时显示全部内容,这样即兼顾了表格整体美观度也满足了用户的阅读体检

.mult-ell-3 {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}

屏幕快照 2017-11-17 上午10.20.27

扩展阅读