CSS 之 table 表格布局

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

页面效果：

三、相关属性

1、caption-side

​ 该属性用于设置表格的标题模块（设置display: table-caption;的元素）相对于表格的位置，该属性的属性值有两种：

• top（默认值）：标题模块位于表格上方。
• bottom：标题模块位于表格的下方。
• 更多内容可查看：caption-side。

2、border-collapse

​ 该属性用于设置表格内单元格的相邻边框是分开还是合并，属性值有两种：

• separate(默认值)：设置相邻单元格的相邻边框不进行合并，相邻单元格都有自己的边框，因此表格中间的边框宽度将是表格最外侧边框宽度的两倍。而且只有此时可以通过border-spacing属性设置两个边框之间的距离。
• collapse：设置相邻单元格的相邻边框进行合并，且合并后的边框宽度为单个边框的宽度，两个单元格共用一个边框。
• 更多内容请查看：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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

页面效果：

4、table-layout

​ 该属性用于设置表格的布局算法，也就是如何分配单元格的宽度和调整表格的大小。属性值有两个：

• auto(默认值)：表格及其单元格的宽度会根据内容自动调整大小。
• fixed：表格和列的宽度是由 table 和 col 元素的宽度或第一行中单元格的宽度来设置的，默认一行中的单元格平分本行的宽度，如果有的单元格设置了宽度，则其余单元格平分宽度。下面行中的单元格的内容不会影响单元的宽度，但如果内容过多就很可能会溢出，因此可以结合overflow: hidden;等属性对内容进行截取。
• 更多内容可查看：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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

页面效果：

5、vertical-align

​ 该属性用于设置表格的单元格元素（display: table-cell;）的垂直对齐方式，也可用于设置页面中行内元素（inline）、行内块元素（inline-block）的垂直对齐方式。该属性的属性值有：

• top(默认值)：设置单元格的内容与该行的顶部对齐。
• bottom：设置单元格内容与该行的底部对齐。
• middle：设置单元格内容在该行内垂直居中。
• baseline、sub、super、text-top、text-bottom等其他属性。
• 更多内容请查看：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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

页面效果：

四、参考资料

table的MDN文档