跳到主要内容

表格边框

表格的 css 的 border 属性 ,用法和图片边框一样 ,但要注意单元格边框的特殊性。

单元格边框之间会有空隙 ,可以使用 css 的 border-collapse 属性去掉。

border-collapse​

border-collapse: separate | collapse;

separate 表示边框独立 , collapse 表示相邻边框将被合并 。

该属性作用于 table ,而不是 th 或 td

单元格边距​

border-spacing: length;

只有当边框的 border-collapse 属性设置为 separate 时才能使用该属性 。当然 ,作为块级元素 ,单元格可使用 padding 设置内边距

标题的位置​

caption-side: top | bottom;

使用该属性为表格 ( table )的标题 ( caption )设置位置 ,可在上边 ,也可在底部。

Firefox 还支持 right 和 left 两个怪异属性

隐藏单元格​

empty-cells: hide | show;
  • hide 是当单元格无内容时 ,隐藏单元格
  • show 是当单元格无内容时显示边框

设置表格布局计算算法​

table-layout: automatic | | fixed | | inherit;
  • automatic ： 默认，列宽由单元格内容设定
  • fixed ： 列宽由表格宽度和列宽设定
  • inherit ： 继承

分页​

在打印时显示是否分页，即便提供这样的功能，但是，尽量避免使用分页属性，避免在表格、浮动元素、带有边框的块元素中使用分页属性

page-break-after​

page-break-before​

page-break-inside​

break-after​

break-after 属性规定了在指定的元素之后是否应该发生分页（ page-break ）、分列（ column-break ）、分区（ region-break ）。

break-after 属性扩展了 CSS2 的 page-break-after 属性。

break-after: auto| /* 默认，在元素后自动进行分页、分列、分区 */ all|
  /* 始终在主体框之后插入分页符 */ always| /* 始终在元素之后插入分页符 */ avoid|
  /* 避免在元素之后出现页、列、区域中断 */ avoid-column|
  /* 避免在元素之后分列 */ avoid-page| /* 避免在元素后分页 */ avoid-region|
  /* 避免在元素之后分区 */ column| /* 始终在元素之后插入分裂符 */ left|
  /* 在元素之后插入一个或两个分页符，以便在下一页格式化为左页 */ page|
  /* 始终在元素之后插入分页 */ recto|
  /* 在主体框之后插入一个或两个分页符，以便下一页格式化为 recto 页 */ region|
  /* 始终在元素之后插入分区符 */ right|
  /*在元素之后插入一个或两个分页符，以便格式为右页 */ verso|
  /* 在主体框后插入一个或两个分页符，以便将下一页格式化为 verso 页 */ initial|
  /* 默认 */ inherit;
/* 继承 */

break-before​

break-inside​