CSS table table layout

1. Introduction

In addition to using HTML's <table> element, we can also set the layout type inside the element to table layout through display: table/inline-table;. And combined with table-cell, table-row and other related CSS attribute values can achieve the effect of <table> series elements in HTML, with header and footer , rows, cells and other concepts allow elements to be laid out in the form of tables.

This attribute only implements the layout effect of <table>, and the two are not equivalent to the browser itself. If you use this attribute, it does not conform to the semantics of the tag and is not conducive to SEO. However, the advantage is that the code is much simpler than the nesting of <table>, and <table> can only be used in The table content will be displayed only after it is fully loaded. This attribute uses ordinary elements and is parsed and displayed line by line without waiting for the entire content to be loaded.

Browser compatibility:

Insert image description here

2. Series attributes

1. Table series display attribute value

table: Set the element to a block-level table element, similar to HTML's <table>.
inline-table: Set the element to an inline block table element, similar to HTML's <table>.
table-row: Set the element to the row of the table, similar to HTML's <tr>.
table-cell: Set the element to a table cell, similar to HTML's <td>, <th>.
table-header-group: Set the element to the header row of the table, similar to HTML's <thead>.
table-footer-group: Set the element to the footer row of the table, similar to HTML's <tfoot>.
table-row-group: Set the element to the main content of the table, similar to HTML's <tbody>.
table-column: Set the element to a table column, similar to HTML's <col>.
table-column-group: Set the element to a table column group, similar to HTML's <colgroup>.
table-caption: Set the element to the title of the table, similar to HTML's <caption>.

All cases are based on the following DOM structure:

<div class="table">
	<div class="row row1">
		<div class="cell cell1">张三</div>
		<div class="cell cell2">李四</div>
		<div class="cell cell3">王五</div>
	</div>
	<div class="row row2">
		<div class="cell cell1">张三三</div>
		<div class="cell cell2">李四四</div>
		<div class="cell cell3">王五五</div>
	</div>
</div>

2、display: table;

This attribute is used to create a block-level table element, similar to HTML's <table>, which can be used normally padding, < a i=3> attribute, if the width and height are not set for the element, the width and height of the element will depend on the width and height of the content. margin

It is invalid to set this attribute for an element alone. It needs to be used in combination with table-row, table-cell and other attributes to achieve the table layout effect.

.table {
    
    
   display: table;
   padding: 50px;
   margin: 40px;
   background: pink;
}

Page effect:

Insert image description here

3、display: inline-table;

This attribute is used to create an inline block table element, similar to HTML's <table>, but can be located on the same line as other inline and inline block elements. If the width is not set for the element height, the width and height of the element will depend on the width and height of the content.

It is invalid to set this attribute for an element alone (the characteristics of inline blocks are valid). It needs to be at least combined with the table-row and table-cell attributes. Only when used in combination can the table layout effect be achieved.

<style>
.table {
      
      
   display: inline-table;
   padding: 50px;
   margin: 40px;
   background: pink;
}
</style>

<div class="table">
  ...
</div>
<div style="display: inline-block;background: #ccc;">
  这是table下面的一个行内块元素
</div>

Page effect:

Insert image description here

4、display: table-row;

This attribute is used to set the element to a table layout row, similar to HTML's <tr>, which wraps the element setting display: table-cell; inside and must be located Set inside the element of display: table/inline-table;.

For elements that set this attribute, setting padding and margin is invalid and will not affect the content layout. At the same time, the element settingborder attribute is also invalid.

Setting this attribute for an element alone has no effect. At least it needs to be used in combination with the table/inline-table and table-cell attributes to achieve table layout. Effect.

5、display: table-cell;

This attribute is used to set the element to a table cell, similar to HTML's <td>, <th>, which is set to display: table-row; element is wrapped and becomes a cell, and is located inside the element setting display: table/inline-table;.

For elements that set this attribute, setting padding and border is valid, but setting margin is invalid.

Setting this attribute for an element alone has no effect. At least it needs to be used in combination with the table/inline-table and table-row attributes to achieve table layout. Effect.

.table {
    
    
	display: table;
	padding: 50px;
	margin: 40px;
	background: pink;
}
.row {
    
    
	display: table-row;
	padding: 5px;
	margin: 5px;
	border: 1px solid red;
}
.cell {
    
    
	display: table-cell;
	padding: 10px;
	margin: 10px;
	border: 1px solid #cccccc;
}

Page effect:

Insert image description here

6、display: table-header-group;

7、display: table-footer-group;

8、display: table-row-group;

display: table-header-group; attribute is used to set the element to the header row of the table, similar to HTML's <thead>, which can contain multiple settingsdisplay: table-row; elements and other ordinary elements.

display: table-footer-group; attribute is used to set the element to the footer row of the table, similar to HTML's <tfoot>, which can contain multiple settings display: table-row; elements and other ordinary elements.

display: table-header-group; attribute is used to set the element as the main content group of the table, similar to HTML's <tbody>, which can contain multiple settingsdisplay: table-row; elements and other ordinary elements.

Elements that set these attributes set float, margin, padding, and width is invalid, and the element's width adapts to the width of the content. If the set element's height is greater than the height of the element's content, the actual height is the set height, otherwise the set element's height is less than the element's content. The height of the content, then the actual height is the height of the content.

Personally, I feel that these three attributes are more to facilitate the grouping of elements and increase the readability of the code, and have little practical significance.

<style>
.table {
      
      
	display: table;
	background: pink;
}
.row {
      
      
	display: table-row;
}
.cell {
      
      
	display: table-cell;
	border: 1px solid #cccccc;
}
.header-group {
      
      
	display: table-header-group;
	width: 200px;
	height: 10px;
	margin-left: 50px;
	padding: 10px;
}
.body-group {
      
      
	display: table-row-group;
	width: 200px;
	height: 100px;
	margin-left: 50px;
	padding: 10px;
}
.footer-group {
      
      
	display: table-footer-group;
	width: 200px;
	height: 10px;
	margin-left: 50px;
	padding: 10px;
}
</style>


<div class="table">
    <div class="header-group">
      <div class="row row1">
        <div class="cell cell1">header张三</div>
        <div class="cell cell2">header李四</div>
        <div class="cell cell3">header王五</div>
      </div>
      <div class="row row1">
        <div class="cell cell1">header张三</div>
        <div class="cell cell2">header李四</div>
        <div class="cell cell3">header王五</div>
      </div>
      <span>111111</span>
    </div>
    <div class="body-group">
      <div class="row row2">
        <div class="cell cell1">body张三三</div>
        <div class="cell cell2">body李四四</div>
        <div class="cell cell3">body王五五</div>
      </div>
      <span>222222</span>
    </div>
    <div class="footer-group">
      <div class="row row2">
        <div class="cell cell1">footer张三三三</div>
        <div class="cell cell2">footer李四四四</div>
        <div class="cell cell3">footer王五五五</div>
      </div>
      <span>333333</span>
    </div>
</div>

Page effect:

Insert image description here

9、display: table-column;

10、display: table-column-group;

The display: table-column; attribute is used to set the element to a table column, similar to HTML's <col>. It is an abstract concept and does not need to be written in Instead of writing to a specific cell, it is written to a separate element. The columns corresponding to the cells in the table must be located inside the element where display: table-column-group; is set.

display: table-column-group; attribute is used to set the element to a table column group, similar to HTML's <colgroup>, which contains multiple settings < The element of a i=3> represents a set of columns. display: table-column;

To set these two attributes, set float, margin, padding and height is invalid, and attributes such as width and background are valid, so they are usually used to implement special style operations on cells in certain columns.

<style>
.table {
      
      
	display: table;
	background: pink;
}
.row {
      
      
	display: table-row;
}
.cell {
      
      
	display: table-cell;
	border: 1px solid #cccccc;
}
.column {
      
      
	display: table-column;
	width: 100px;
	height: 50px;
	margin-left: 50px;
	padding: 10px;
}
.column:nth-child(2) {
      
      
	background: yellow;
}
.column-group {
      
      
	display: table-column-group;
	width: 100px;
	height: 50px;
	margin-left: 50px;
	padding: 10px;
}
</style>

<div class="table">
    <div class="column-group">
      <!-- 三个列元素 对应 每行的三个单元格 -->
      <div class="column"></div>
      <div class="column"></div>
      <div class="column"></div>
    </div>
    <div class="row row1">
      <div class="cell">张三</div>
      <div class="cell cell2">李四</div>
      <div class="cell cell3">王五</div>
    </div>
    <div class="row row2">
      <div class="cell cell1">张三三</div>
      <div class="cell cell2">李四四</div>
      <div class="cell cell3">王五五五</div>
    </div>
</div>

Page effect:

Insert image description here

11、display: table-caption;

This attribute is used to set the title module of the element as a table, similar to HTML's <caption>. At the same time, it can be combined with the caption-side attribute to implement the title module relative to Positioning of the table area.

<style>
.table {
      
      
	display: table;
	background: pink;
}
.row {
      
      
	display: table-row;
}
.cell {
      
      
	display: table-cell;
	border: 1px solid #cccccc;
}
.caption {
      
      
	display: table-caption;
	caption-side: bottom; /* 默认为top */
	margin: 10px;
	padding: 10px;
}
</style>

  <div class="table">
    <div class="caption">
      这是表格的标题模块
    </div>
    <div class="row row1">
      ...
    </div>
    <div class="row row2">
      ...
    </div>
</div>

Page effect:

Insert image description here

3. Related attributes

1、caption-side

This attribute is used to set the position of the table's title module (the element that sets display: table-caption;) relative to the table. There are two attribute values for this attribute:

top(Default): The title module is positioned above the table.
bottom:The title module is located below the table.
More content available:caption-side.

2、border-collapse

This property is used to set whether the adjacent borders of cells in the table are separated or merged. There are two property values:

separate (default value): Set the adjacent borders of adjacent cells not to be merged. Adjacent cells have their own borders, so the width of the border in the middle of the table will be twice the width of the outermost border of the table. And only then can the distance between the two borders be set through the border-spacing attribute.
collapse: Set the adjacent borders of adjacent cells to merge, and the width of the merged border is the width of a single border, and the two cells share one border.
For more information, see:border-collapse.

<style>
.table {
      
      
	display: table;
	background: pink;
	border-collapse: collapse;
}
.table2 {
      
      
	margin-top: 30px;
	border-collapse: separate;
}
.table3 {
      
      
	margin-top: 30px;
	border-collapse: separate;
	border-spacing: 5px; /* 设置相邻边框之间的间隔 */
}
.row {
      
      
	display: table-row;
}
.cell {
      
      
	display: table-cell;
	border: 1px solid #cccccc;
}
</style>

  <div class="table">
    <div class="row row1">
      <div class="cell cell1">张三</div>
      <div class="cell cell2">李四</div>
      <div class="cell cell3">王五</div>
    </div>
    <div class="row row2">
      <div class="cell cell1">张三三</div>
      <div class="cell cell2">李四四</div>
      <div class="cell cell3">王五五五</div>
    </div>
  </div>
  <div class="table table2">
    <div class="row row1">
      <div class="cell cell1">张三</div>
      <div class="cell cell2">李四</div>
      <div class="cell cell3">王五</div>
    </div>
    <div class="row row2">
      <div class="cell cell1">张三三</div>
      <div class="cell cell2">李四四</div>
      <div class="cell cell3">王五五五</div>
    </div>
  </div>
  <div class="table table3">
    <div class="row row1">
      <div class="cell cell1">张三</div>
      <div class="cell cell2">李四</div>
      <div class="cell cell3">王五</div>
    </div>
    <div class="row row2">
      <div class="cell cell1">张三三</div>
      <div class="cell cell2">李四四</div>
      <div class="cell cell3">王五五五</div>
    </div>
  </div>

Page effect:

Insert image description here

4、table-layout

This property is used to set the layout algorithm of the table, that is, how to allocate the width of cells and adjust the size of the table. There are two attribute values:

auto(Default): The width of the table and its cells automatically resizes based on the content.
fixed: The width of the table and columns is set by the width of the table and col elements or the width of the cells in the first row. The default is one row. The cells in the row equally divide the width of this row. If some cells have a width set, the remaining cells divide the width equally. The content of the cells in the row below will not affect the width of the cell, but if there is too much content, it is likely to overflow. Therefore, the content can be intercepted by combining attributes such as overflow: hidden;.
More content can be found at:table-layout.

<style>
    .table {
      
      
      display: table;
      margin-bottom: 30px;
      background: pink;
      table-layout: fixed;
      width: 400px;
    }

    .row {
      
      
      display: table-row;
    }

    .cell {
      
      
      display: table-cell;
      /* width: 10px; */
      border: 1px solid #cccccc;
    }


    .table2 .cell1 {
      
      
      width: 30px;
    }
</style>

<div class="table">
    <div class="row row1">
      <div class="cell cell1">张三</div>
      <div class="cell cell2">李四</div>
      <div class="cell cell3">王五</div>
    </div>
    <div class="row row2">
      <div class="cell cell1">张三三</div>
      <div class="cell cell2">李四四</div>
      <div class="cell cell3">王五五五</div>
    </div>
</div>
<div class="table table2">
    <div class="row row1">
      <div class="cell cell1">张三</div>
      <div class="cell cell2">李四</div>
      <div class="cell cell3">王五</div>
    </div>
    <div class="row row2">
      <div class="cell cell1">张三三</div>
      <div class="cell cell2">李四四</div>
      <div class="cell cell3">王五五五</div>
    </div>
</div>

Page effect:

Insert image description here

5、vertical-align

This attribute is used to set the vertical alignment of the cell elements of the table (display: table-cell;), and can also be used to set the inline elements in the page (inline ), vertical alignment of inline block elements (inline-block). The attribute values of this attribute are:

top(Default): Aligns the cell's contents to the top of the row.
bottom: Sets the cell content to be aligned with the bottom of the row.
middle: Set the cell content to be vertically centered within the row.
baselineOther attributes such as , sub, super, text-top, text-bottom, etc.
For more information, see:vertical-align.

<style>
.table {
      
      
	display: table;
	margin-bottom: 30px;
	background: pink;
}
.row {
      
      
	display: table-row;
}
.cell {
      
      
	display: table-cell;
	height: 200px;
	border: 1px solid #cccccc;
  vertical-align: middle; /* 设置内容在行内垂直居中对齐 */
}
</style>

<div class="table">
    <div class="row row1">
      <div class="cell cell1">张三</div>
      <div class="cell cell2">李四</div>
      <div class="cell cell3">王五</div>
    </div>
    <div class="row row2">
      <div class="cell cell1">张三三</div>
      <div class="cell cell2">李四四</div>
      <div class="cell cell3">王五五五</div>
    </div>
</div>

Page effect:

Insert image description here

4. Reference materials

MDN documentation for table