CSS表格属性

border-collapse

border-collapse属性定义表格的表框显示行为。默认值separate表示表格的表框和单元格的边框分开,边框之间会有空白间隙。属性值collapse表示合并为一个边框,它们之间的空白将不存在,因此会忽略border-spacingempty-cells属性,值inherit继承。

border-spacing

该属性定义单元格间的空白距离。属性值最多为两个,表示水平间距和垂直间距,属性值为一个时表示水平垂直间距相同,可以使用px、cm等固定值CSS单位,inherit继承。

caption-side

该属性定义表格标题的放置位置。默认值top表示标题位于表格上方,可选值bottom标题位于表格之下,inherit继承。

empty-cells

该属性表示是否显示空单元格的边框和背景。默认值show显示,可选值hide不显示,inherit继承。border-collapse为separate时才有效

table-lauout

该属性定义表格单元格、行、列的算法规则。默认值automatic表示列宽由内容多少决定,当内容的长度超过规定单元格的宽度时,单元格宽度就等于内容长度,如果内容足够长会自动出现横滚动条,我测试了下对中文无效,例2和例3对比了中英文的差异。属性值fixed表示列宽由单元格宽度决定,如果内容超过了单元格宽度会一直延伸,所以可能会覆盖右边单元格的内容,如例4所示。inherit继承。对于中文以上两个属性表现效果相同。

示例

以上所有属性默认都有继承性

优秀文章首发于聚享小站,欢迎关注!
原文地址:https://www.cnblogs.com/yesyes/p/15356419.html