一、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 表

总结：本章内容主要介绍了 Css 表格。