CSS table properties_html/css_WEB-ITnose

CSS table:

属性	描述
border-collapse	设置是否把表格边框合并为单一的边框。
border-spacing	设置分隔单元格边框的距离。
caption-side	设置表格标题的位置。
empty-cells	设置是否显示表格中的空单元格。
table-layout	设置显示单元、行和列的算法。

Properties

Description

border-collapse

Set whether to merge table borders into a single border .

值	描述
separate	默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
collapse	如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
inherit	规定应该从父元素继承 border-collapse 属性的值。

border-spacing

Sets the distance separating cell borders.

caption-side

Set the position of the table title.

empty-cells

Set whether to display empty cells in the table.

table-layout

Set the algorithm for displaying cells, rows and columns.

1. Collapse table border: border-collapse attribute

(1) Function: Set whether the border of the table is Whether it is combined into a single border or displayed separately like in standard HTML;

值	描述
length length	规定相邻单元的边框之间的距离。使用 px、cm 等单位。不允许使用负值。 如果定义一个length参数，那么定义的是水平和垂直间距。 如果定义两个length参数，那么第一个设置水平间距，而第二个设置垂直间距。
inherit	规定应该从父元素继承   border-spacing 属性的值。

(2) Supplementary knowledge point: The table has a double-line border. This is because the table, th and td elements have independent borders.

(3) Possible values:

value

Description

值	描述
top	默认值。把表格标题定位在表格之上。
bottom	把表格标题定位在表格之下。
inherit	规定应该从父元素继承 caption-side 属性的值。

separate

Default value. The borders will be separated. The border-spacing and empty-cells properties are not ignored.

collapse

Borders will be merged into a single border if possible. The border-spacing and empty-cells properties are ignored.

inherit

Specifies that the value of the border-collapse attribute should be inherited from the parent element.

(4) Browser support: All major browsers support the border-collapse attribute. Ps: must specify !DOCTYPE, otherwise border-collapse may produce unexpected results. 2. Table margins: padding attribute #Function: Control the distance between the content and the border in the table. Please set padding for the td and th elements. Attribute; 3. Border separation: border-spacing attribute (1) Function: This attribute specifies the distance between cell boundaries in the separated border model. This property is ignored unless border-collapse is set to separate. Although this property only applies to tables, it is inherited by all elements in the table. (2) Possible values:

value	Description
length length	Specifies the distance between the borders of adjacent cells . Use units such as px, cm, etc. Negative values ​​are not allowed. If a length parameter is defined, the horizontal and vertical spacing is defined. If two length parameters are defined, then the first one sets the horizontal spacing and the second one sets the vertical spacing.
inherit	Specifies that the value of the border-spacing attribute should be inherited from the parent element.

(3) Browser compatibility: All mainstream browsers except IE support the border-spacing attribute. Internet Explorer 8 (and later) supports the border-spacing property if !DOCTYPE is specified. 4. Table title: caption-side attribute (1) Function: Set the position of the table title. This attribute specifies the placement of the table title relative to the table frame. Location. The table title is displayed as if it were a block-level element before (or after) the table. (2) Possible values:

value	Description
top	Default value. Position the table title above the table.
bottom	Position the table title below the table.
inherit	Specifies that the value of the caption-side attribute should be inherited from the parent element.

(3) Browser compatibility: All major browsers except IE support the caption-side attribute. Internet Explorer 8 (and later) supports the caption-side attribute if !DOCTYPE is specified.

5. Handling of empty cells: empty-cells attribute

(1) Function: This attribute defines how table cells containing no content are represented. If displayed, the cell's borders and background are drawn. This property is ignored unless border-collapse is set to separate.

(2) Possible values:

值	描述
hide	不在空单元格周围绘制边框。
show	在空单元格周围绘制边框。默认。
inherit	规定应该从父元素继承 empty-cells 属性的值。

value

Description

hide

Does not draw a border around empty cells.

show

Draw a border around empty cells. default.

inherit

Specifies that the value of the empty-cells attribute should be inherited from the parent element.

(3) Browser compatibility: All browsers except IE support the empty-cells attribute. Internet Explorer 8 (and later) supports the empty-cells attribute if !DOCTYPE is specified.

6. Table layout algorithm: table-layout attribute

(1) Function: to display the algorithm rules of table cells, rows, and columns. This attribute specifies The layout algorithm used when completing table layout.

(2) Two algorithms:

值	描述
automatic	默认。列宽度由单元格内容设定。
fixed	列宽由表格宽度和列宽度设定。
inherit	规定应该从父元素继承 table-layout 属性的值。

Fixed table layout: fixed

The table is laid out, (in a fixed table layout, the horizontal layout depends only on the table width, column width, table border width, cell spacing, and has nothing to do with the contents of the cells. By using a fixed table layout, the user agent receives the The table can be displayed after one line. );

#Disadvantages: Not very flexible.

                                                                                                                          ; The widest content in the cell is not set. );

#Disadvantages: The automatic algorithm is slower because it needs to access all the content in the table before determining the final layout.

(3) Possible values:

value	Description
automatic	Default. Column width is set by cell content.
fixed	Column width is set by table width and column width.
inherit	Specifies that the value of the table-layout attribute should be inherited from the parent element.