CSS Table
撰写时间：2025-02-10
修订时间：2025-03-10
表格基本结构
HTML4为表格定义以下标签：
- table
- caption
- thead
- tbody
- tfoot
- col
- colgroup
- th
- td
This is a simple table
| Col 1 | Col 2 | Col 3 |
|---|
| A | 1 | 2 |
|---|
| B | 3 | 4 |
|---|
| C | 5 | 6 |
|---|
| footer here |
table {
border-collapse: collapse;
}
caption {
caption-side: top;
}
th {
text-align: center;
font-weight: bold;
}
th {
vertical-align: baseline;
}
td {
vertical-align: middle;
}
tbody tr:nth-child(1) {
border: 3px solid blue;
}
tbody tr:nth-child(2) {
border: 1px solid black;
}
tbody tr:nth-child(3) {
border: 1px solid black;
}
tfoot td {
text-align: right;
}
将非表格标签显示为表格
HTML4默认定义了以下与表格有关的CSS规则：
table { display: table }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group }
col { display: table-column }
colgroup { display: table-column-group }
td, th { display: table-cell }
caption { display: table-caption }
依此定义，我们可以将其他HTML标签显示为table标签：
A Div displayed as Table
ABC
123
456
div#divA {
display: table;
border-collapse: collapse;
}
div#divA > p:first-child {
display: table-caption;
white-space: nowrap;
}
div#divA > div {
display: table-row;
}
div#divA > div:first-of-type > span {
font-weight: bold;
text-align: center;
color: lightgreen;
}
div#divA > div > span {
display: table-cell;
border: 1px solid gray;
text-align: right;
}
标题
caption {
caption-side: top;
}
table {
border-collapse: collapse;
}
th, td {
border: 1px solid gray;
}
th {
text-align: center;
font-weight: bold;
}
Styling Captions
| Col 1 | Col 2 |
|---|
| A | 1 |
|---|
| B | 3 |
|---|
| C | 5 |
|---|
caption-side属性指定标题的位置，其值只有top，及bottom两种。
当表格太窄，且标题文字中有空格时，标题将自动换行。可用white-space来禁止换行。
caption {
white-space: nowrap;
}
table {
border-collapse: collapse;
}
th, td {
border: 1px solid gray;
}
th {
text-align: center;
font-weight: bold;
}
Styling Captions
| Col 1 | Col 2 |
|---|
| A | 1 |
|---|
| B | 3 |
|---|
| C | 5 |
|---|
caption本身是一个块级元素，因此可设定margin, padding, width等属性值。
caption {
border: 1px solid gray;
margin: 5px;
padding: 5px;
}
table {
border: 1px solid gray;
width: 350px;
}
th, td {
border: 1px solid gray;
}
th {
text-align: center;
font-weight: bold;
}
Styling Captions
| Col 1 | Col 2 |
|---|
| A | 1 |
|---|
| B | 3 |
|---|
| C | 5 |
|---|
table及caption分属两个上下并排的块级元素，因此可分开设置各自的border及width属性值。
若将caption的width属性值设得足够大，则可将表格主体部分也拉宽。但在Safari中，如果table未设置width属性值，或其值与caption的width属性值不一样，则会导致caption不能居中于整个表格。因此较好的方式是，只在table中设置width属性值即可。
列的排版
col.title-col {
border: 1px solid gray;
background-color: rgb(51, 81, 84);
width: 5em;
}
col.hidden-col {
visibility: collapse;
}
col.content-cols {
border: 1px solid gray;
background-color: #4D3F4E;
}
table {
border-collapse: collapse;
}
caption {
caption-side: top;
white-space: nowrap;
margin-bottom: 0.5em;
}
th, td {
border: 1px solid gray;
}
th {
text-align: center;
font-weight: bold;
}
th {
vertical-align: baseline;
}
td {
vertical-align: middle;
}
Styling Columns
| Col 1 | Col 2 | Col 3 | Col 4 |
|---|
| A | 1 | 1 | 2 |
|---|
| B | 3 | 1 | 4 |
|---|
| C | 5 | 1 | 6 |
|---|
对列的CSS设置，只包含border, background, width, 以及visibility这4个方面的属性。
Safari不支持表格列的visibility属性设置。
可在不跨多列的列上设置一个双边边框的样式，以突出相关列的归类效果。
col.c1 {
border: 1px solid gray;
background-color: rgb(51, 81, 84);
width: 5em;
border-right: 3px double #aaa;
}
col.c2 {
border: 1px solid gray;
background-color: #4D3F4E;
}
col.c3 {
border: 1px solid gray;
background-color: #484E93;
border-left: 3px double #aaa;
}
table {
border-collapse: collapse;
}
caption {
caption-side: top;
white-space: nowrap;
margin: 0.5em;
}
th, td {
border: 1px solid gray;
padding: 0.5em;
}
th {
text-align: center;
font-weight: bold;
}
th {
vertical-align: baseline;
}
td {
vertical-align: middle;
text-align: right;
}
Styling Columns
| Col 1 | Col 2 | Col 3 | Col 4 | Col 5 |
|---|
| A | 1 | 2 | 3 | 4 |
|---|
| B | 5 | 6 | 7 | 8 |
|---|
实务中经常需要对各列统一指定对齐方式。
table {
border-collapse: collapse;
}
th, td {
border: 1px solid gray;
padding: 0.5em;
}
th {
text-align: center;
font-weight: bold;
}
td:nth-child(2) {
text-align: center;
color: darksalmon;
}
td:nth-child(5) {
text-align: right;
color: lightgreen;
}
Styling Columns
| Col 1 | Col 2 | Col 3 | Col 4 | Col 5 |
|---|
| A | text | 2 | 3 | 4 |
|---|
| B | text | 6 | 7 | 8 |
|---|
上面第2列及第5列的td均通过使用伪类nth-child(n)的方式，单独设置了文本对齐方式。
table标签的设置
table {
border: 1px solid gray;
margin: 1em;
padding: 1em;
background-color: #111;
}
Styling table
| Col 1 | Col 2 |
|---|
| A | 1 |
|---|
| B | 3 |
|---|
| C | 5 |
|---|
黑色背景部分即为table标签的有效区域。
margin用于设置与外部其他标签的间距，但margin-top从caption的顶部起算。
padding用于设置与内部th标签, td标签之间的间距。
需注意的是，上面4种属性中，仅background属性值影响到子标签th, td；而border, margin及padding的设置不影响子标签。
table与子标签的关系
table {
border: 1px solid gray;
padding: 1em;
}
td, th {
border: 1px solid #555;
}
table padding
| Col 1 | Col 2 |
|---|
| A | 1 |
|---|
| B | 3 |
|---|
| C | 5 |
|---|
上面，table， th及td标签均设置了各自的边框线，由此清晰可见，table的padding属性将在子标签与table标签之间产生明显的间距。
此外，即使将padding属性值去掉，也可清楚地看到单元格的边框线之间仍旧有细微的间距。这种表格不好看。
table的边框线塌陷
table {
border-collapse: collapse;
}
td, th {
border: 1px solid gray;
padding: 0.2em;
}
cell padding
| Col 1 | Col 2 |
|---|
| A | 1 |
|---|
| B | 3 |
|---|
| C | 5 |
|---|
将table标签border-collapse属性值设置为collapse，并改由在th, td标签中设置border及padding属性值，可产生非常好的视觉效果。
综合例子
table {
border-collapse: collapse;
font-size: 80%;
width: 30%;
}
caption {
margin: 1em;
color: #8CB4FF;
}
td, th {
border: 1px solid #517994;
padding: 0.5em;
}
th {
background-color: #1E2630;
}
tr:nth-child(odd) td {
background-color: #323232;
}
tr:nth-child(even) td {
background-color: #3A3A3A;
}
tr:hover td {
color: white;
background-color: #505050;
cursor: pointer;
}
td:nth-child(1) {
text-align: center;
}
td:nth-child(2) {
text-align: left;
}
td:nth-child(3) {
text-align: right;
color: rgb(210, 168, 255);
}
高一（2）班学生成绩表
| 学号 | 姓名 | 成绩 |
|---|
| 1 | 张三 | 85 |
| 2 | 李四 | 69 |
| 3 | 王五 | 73 |
| 4 | 赵六 | 92 |
