CSS 为表格定义了5个专用属性。
一、border-collapse
该属性用于定义表格的行和单元格的边是合并在一起的还是按照标准的 HTML 样式分开的。
语法:
border-collapse: separate | collapse
-
- separate:不合并单元格边框
- collapse:合并单元格边框
- separate:不合并单元格边框
二、border-spacing
该属性用于定义当表格边框独立,行和单元格的边在横向和纵向上的间距,该值不可以取负值。
语法:
border-spacing:20px 30px;
Tips:该属性有一个值的表示行间距和列间距都为该值。如果为两个值,第一个值表行间距,第二个值表示列间距。
三、caption-side
该属性可以定义标题的显示位置。
语法:
caption-side:top | bottom | left | right
-
- top:表示标题位于表格上面;
- bottom:表示标题位于表格下面;
- left:表示标题位于表格左侧;
- right:表示标题位于表格右侧;
- top:表示标题位于表格上面;
Tips:如果要水平对齐标题文本,可以使用 text-align 属性。对于左右两侧的标题,可以使用 vertical-align 属性进行垂直对齐,取值包括 top、middle 和 bottom,其他值无效,默认为 top。
四、empty-cells
该属性用于设置是否显示空白单元格。
语法:
empty-cells: show | hide;
-
- show:表示显示空单元格;
- hide:表示隐藏空单元格;
五、table-layout
该属性用于定义表格的布局算法。
语法:
table-layout: auto | fixed;
-
- auto:表格在每一单元格内所有的内容读取计算之后才会显示出来;
- fixed:IE 以一次一行的方式呈递表格内容从而提供给信息用户更快的速度;