一、CSS 表格常用样式属性
表格常用样式属性
- 边距属性: padding
- 尺寸属性: width、height
- 设置表格或者单元格的尺寸
- 文本格式化属性
- 背景属性 : 设置表格或者单元格的背景色或者背景图像
- border 属性: 设置表格边框
垂直方向对齐
- vertical-align 属性
- 在表单元格中，设置单元格框中的单元格内容的对齐方式
- 取值
- vertical-align : top/middle/bottom;
二、表格特有样式属性
边框合并 border-collapse
- 如果设置了单元格的边框，相邻单元格的边框会单独显示，类似于双线边框
- border-collapse 属性: 合并相邻的边框
- 设置是否将表格边框合并为单一边框
- border-collapse:separate/collapse;
边框边距 border-spacing
- border-spacing 属性
- 设置相邻单元格的边框间的距离
- 仅限于分隔单元格边框，即 border-collapse 属性为 separate 值的情况下，也称为边框分离模式
- 取值为长度值，可以为该属性指定一个或者两个值
- 指定一个值: 该值同时应用于水平和垂直间距
- 指定两个值: 第一个值指定水平间距，第二个值指定垂直间距，且两个值之间用空格隔开
标题位置 caption-side
- caption-side 属性设置表格标题的位置，指定表标题相对于表框的放置位置
- 可取值
- top : 表格标题定位在表格之上，为默认值
- bottom : 表格标题定位在表格之下
‘
显示规则 table-layout
- table-layout 属性用来帮助浏览器如何显示或者布局一张表，即用来设置显示表格单元格、行、列的算法规则
- auto: 列宽度由单元格内容设定，为默认值，即自动表格布局
- fixed:列宽由表格宽度和列宽度设定，即固定表格布局
- 自动表格布局
- 单元格的大小会适应内容的大小
- 在表格复杂时会比较慢
- 适用于不知道每一列的确定大小
- 固定表格布局
- 取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关
- 会加速表的显示，因为浏览器在接受到第一行后就可以显示表格
- 固定布局算法比较快，但是不太灵活
- 自动算法比较慢，不过更能反映传统的 HTML 表