表格的样式属性
表格中的每个单元格, 都是盒模型中一个独立的盒子, 并生成一个矩形框因此, 盒模型中几乎所有的属性, 如边框内边距背景对齐方式文本字体等, 都适用于单元格的 td 元素但有一点除外, 外边距属性对 td 元素无效, 相邻单元格之间的距离, 是通过 border-spacing 属性进行调整, 而不是外边距属性
在 CSS2 中, 为表格定义了 5 个专用的属性, 分别为 table-layout 属性 caption-side 属性 border-spacing 属性 empty-cells 属性 和 border-collapse 属性, CSS3 中未新增属性
table-layout
table-layout 属性来定义表格的布局算法, 取值为 auto | fixed, 默认值为 autoauto 表示自动布局, fixed 表示固定布局
使用自动布局时, 表格的布局是由浏览器根据各单元格的内容自动计算得到, 列的宽度是由列单元格中, 没有折行的最宽内容设定由于需要在所有单元格的内容读取计算之后, 才能确定最终布局, 所以渲染速度较慢
使用固定布局时, 水平布局仅取决于表格宽度列的宽度表格边框宽度单元格间距, 而与单元格的内容无关浏览器接收到第一行数据后, 就可以确定布局, 所以渲染速度较快因此, 最好是通过表头 th 元素的 width 属性, 来设置列的宽度
当然, 根据应用的需要, 也可以只设置其中某些列的宽度这样的话, 设置了固定宽度的列将采用固定布局, 而没有设置固定宽度的列将采用自动布局无论怎样, 只要有一个列设置了固定宽度, 表格的 table-layout 属性就必须设置为 fixed 如, 有以下表格:
2015 年销售额年季度销售额 (万元) 说明
- 201511895.26...
- 201523456.84...
- 201534857.69...
- 201548941.82...
由于表格的第 123 列的内容比较明确, 其宽度也相对固定因此, 就可以设置这三列的宽度, 来采用固定布局, 而不设置第 4 列的宽度, 让它采用自动布局:
- table {
- width: 100%;
- border-spacing: 0;
- table-layout: fixed;
- border-collapse: collapse;
- }
- th:nth-child(1),
- th:nth-child(2) {
- width: 40px;
- }
- th:nth-child(3) {
- width: 120px;
- }
上述表格中, 由于第 123 列设置了固定宽度, 表格的 table-layout 属性就必须设置为 fixed
由于表格的宽度设置为百分比, 表格就会随着浏览器窗口自动缩放(当然, 还需要祖先元素采用流式布局), 第 4 列也就会随之缩放但无论怎么缩放, 第 123 列的宽度始终保持不变运行结果如图 72 所示:
图 7-2 表格的布局
caption-side
caption-side 属性用来定义 caption 框的显示位置默认值情况下, caption 框显示在表格的上方, 可以把 caption-side 属性设置为 bottom 让它显示在表格的下方
border-spacing
border-spacing 属性用来定义相邻单元格的边框之间的距离, 默认值为 0 使用长度值定义, 不允许使用负值该属性需要两个长度值, 第一个用于水平间距, 第二个用于垂直间距如果只提供一个长度值, 则同时用于水平间距和垂直间距
需要注意的是, 只有在 border-collapse 属性取值为 separate 时, 该属性才会有效并且, 该属性是应用于表格本身, 而不是单元格如果为 td 元素声明 border-spacing 属性, 则会被浏览器忽略
empty-cells
empty-cells 属性用来定义当表格的单元格无内容时, 是否显示该单元格的边框, 取值为 hide | show, 默认值为 show 只有在 border-collapse 属性取值为 separate 时, 该属性才会有效
如果该属性设置为 show, 则会绘制空单元格的边框和背景, 就好像该单元格有内容一样如果值为 hide, 则不会绘制该单元格的边框和背景, 就好像该单元格被设置为 visibility: hidden 一样
如果一个单元格包含有内容, 则不能认为是空的这里的内容除了文本图像表格等, 还包括不间断空格 ( ) 以及除回车换行空格符以外的所有其它空白符如果一行中的所有单元格都为空, 而 empty-cells 的值为 hide, 则该行的高度为 0, 就好像这个整行被设置为 display: none 一样
border-collapse
border-collapse 属性用来定义单元格边框的显示方式, 取值为 separate | collapse, 默认值为 separateseparate 表示各单元格有独立的边框, collapse 表示相邻单元格的边框被合并为一个边框
边框独立时, 不会忽略 border-spacing 属性和 empty-cells 属性; 边框合并时, 则会忽略 border-spacing 属性和 empty-cells 属性如:
- .separate {
- border-collapse: separate;
- border-spacing: 2px;
- }
- .collapse {
- border-collapse: collapse;
- }
- caption {
- margin: 4px;
font: bold 14px 黑体;
- }
- th, td {
- border: 1px solid #ccc;
- padding: .3em 1em;
- }
上述代码的运行结果如图 73 所示:
图 7-3 border-collapse 属性效果
上图中, 左侧表格采用独立边框, 右侧表格采用合并边框为了清楚可见, 为单元格定义 1px 的灰色边框, 即每个单元格各自有 1px 的边框独立边框还定义了 2px 的边框间隙
可以看出, 左侧表格单元格的边框各自独立, 单元格之间的距离为各自边框及边框间距之和, 即 1px + 2px + 1px = 4px; 而右侧表格单元格边框被合并成了一个边框, 并忽略了边框间隙, 最终边框宽度依然为 1px
来源: https://www.2cto.com/kf/201802/722760.html