使用 colgroup 和 col 实现响应式表格
Table 在项目使用中十分频繁,特别是在后台管理系统中,table
无疑是数据展示的第一公民,在早些年的网页中,table
也是网页布局的第一选择,然后使用好 table
并不容易,其它有很多子元素和属性需要了解,在实际使用中,table
的自适应也十分重要,如果使用不当,就会导致数据展示混乱,影响用户阅读体验,table
可以说是一把利刃,只要使用恰当,可以简化 DOM
结构,减少很多样式编写,提升布局效率。
基础知识
表格的结构
table(summary) |
说明
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> |
.col1:nth-child(2n) { |
给多列分组
<table class="table"> |
列的样式控制
给 col 添加样式 width
、background
、border
设置 color、font-size、text-align、min-width、max-width
等无效
使用百分比控制列的宽度
<table> |
使用固定宽度及自适应宽度
<table> |
使用 col
及 colgroup
定义列的宽度自适应是最灵活的方式,但是对于浏览器来说,自适应的列会导致渲染的复杂度上升,降低渲染效率,所以css提供了一种渲染效率更高的样式属性 table-layout:fixed
table-layout
为表设置表格布局算法
table { |
属性 | 描述 |
---|---|
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 { |
fixed + 多行 … 显示 【推荐】
如果单行…显示,可以保证所有行的高度一致,但当内容较多时,只能显示少量信息,也不利于阅读体验, 这样就需要单元格内容显示多行,超过规定行数再以 ...
显示
<table style="table-layout:fixed;"></table> |
为单元格内容添加 mult-ell-3
的样式,当内容多行三行时显示 ...
, 并设置title属性,鼠标悬停时显示全部内容,这样即兼顾了表格整体美观度也满足了用户的阅读体检
.mult-ell-3 { |
转自:http://coderlt.coding.me/2017/11/20/table-colgroup/
最新文章
- 来吧,HTML5之基础标签(上)
- Oracle行转列、列转行的Sql语句总结
- C#-WebForm-复合控件
- POJ2777
- Module Zero概览
- ssh连接linux服务器只显示-bash-4.1#不显示路径解决方法
- 感知机-Python实现
- MyBatis java and MySql local variables
- redis学习(3)redis.conf配置文件详解
- Android基础总结(4)——广播接收器
- ajax post提交数据, input type=submit 返回prompt aborted by user
- hdu 4911 Inversion(归并排序求逆序对数)2014多校训练第5场
- jvectormap 中国地图 (包括香港、台湾、澳门)
- koahub软件市场微信编辑器源码,可下载
- PHP是干什么用?
- ------- 软件调试——注销 QQ 过滤驱动设置的事件通知 CallBack (完)-------
- phpstudy如何安装景安ssl证书 window下apache服务器网站https访问
- 列表生成式,迭代器&;生成器
- 用node+webpack+vue新建vue项目步骤
- Python基础-python变量(三)
热门文章
- java架构之路-(MQ专题)RocketMQ从入坑到集群详解
- forEach,map,every,some,filter简单用法实例
- 11 一步一步Zabbix4.4.0系统教你实现sendEmail邮件报警
- windows服务参考
- 学习笔记30_ORM框架
- 学习笔记14Js使用技巧
- 入门Android底层需要的一些技能
- Codeforces 1178G. The Awesomest Vertex
- [专题总结]矩阵树定理Matrix_Tree及题目&;题解
- zookeeper能干啥