使用 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 用于控制列的样式
• thead 和 tfoot 在一张表中都只能有一个，而 tbody 可以有多个
• tfoot 必须出现在 tbody 前面，这样浏览器在接收主体数据之前，就能渲染表尾，有利于加快表格的显示速度。这一点对大型表格尤其重要
• thead、tbody 和 tfoot 里面都必须使用 tr 标签

单元格合并

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

常用于特殊的表格数据展示，如订单列表、表单详情展示等

列的样式

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

给多列分组

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

列的样式控制

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

使用百分比控制列的宽度

<table>
	<col class="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>

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

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

使用 col 及 colgroup 定义列的宽度自适应是最灵活的方式，但是对于浏览器来说，自适应的列会导致渲染的复杂度上升，降低渲染效率，所以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 使内容换行

fixed + break-all

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

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

fixed + 不换行…显示

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

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

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

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

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

扩展阅读

• 精通HTML表格的使用
• MDN table-layout
• 多行文本…显示