优雅表格设计：CSS 美化技巧详解

一个普通 Table 分步骤进行美化代码

html 复制代码

<table>
  <thead>
    <tr>
      <th>Country</th>
      <th>Mean temperature change (°C)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>United Kingdom</th>
      <td>1.912</td>
    </tr>
    <tr>
      <th>Afghanistan</th>
      <td>2.154</td>
    </tr>
    <tr>
      <th>Australia</th>
      <td>0.681</td>
    </tr>
    <tr>
      <th>Kenya</th>
      <td>1.162</td>
    </tr>
    <tr>
      <th>Honduras</th>
      <td>0.945</td>
    </tr>
    <tr>
      <th>Canada</th>
      <td>1.284</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Global average</th>
      <td>1.4</td>
    </tr>
  </tfoot>
</table>

添加标题

html 复制代码

<table>
	<caption>Annual surface temperature change in 2022</caption>
</table>

增加行距，对齐方式

第一列左对齐，其他列右对齐

css 复制代码

body {
  font-family: "Open Sans", sans-serif;
  line-height: 1.5;
}
table {
  text-align: left;
}
th,
caption {
  text-align: start;
}
thead th:not(:first-child),
td {
  text-align: end;
}
th,
td {
  padding: 0.25rem 0.75rem;
}

添加边框

css 复制代码

table {
  border-collapse: collapse;
}
th,
td {
  border: 1px solid;
}

修改表格头部和尾部

css 复制代码

thead {
  border-block-end: 2px solid;
  background: whitesmoke;
}
tfoot {
  border-block: 2px solid;
  background: whitesmoke;
}
th,
td {
  border: 1px solid lightgrey;
}

添加颜色

css 复制代码

table {
  --color: #d0d0f5;
}
thead,
tfoot {
  background: var(--color);
}
tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--color), transparent 60%);
}

固定第一列

css 复制代码

th:first-child {
  position: sticky;
  inset-inline-start: 0;
}
td:first-of-type,
:where(thead, tfoot) th:nth-child(2) {
  border-inline-start: none;
}

th:first-child::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  width: 1px;
  height: 100%;
  background: lightgrey;
}

垂直对齐

css 复制代码

th,
td {
  vertical-align: baseline;
}

thead th {
  vertical-align: bottom;
}

列宽度自适应

css 复制代码

thead th:not(:first-child) {
  width: 9rem;
}
table {
  width: max(65rem, 100%);
  /* 浏览器忽略单元格内容，而是使用在第一个表格行的列或单元格上定义的宽度来解析列宽 */
  table-layout: fixed;
}
th:first-of-type {
  width: 10rem;
}

无障碍

html 复制代码

<div
  class="wrapper"
  tabindex="0"
  role="region"
  aria-labelledby="tableCaption_01"
>
  <table>
    <caption id="tableCaption_01"></caption>
    <thead>
      <tr>
        <th scope="column">Country</th>
        <th scope="column">Mean temperature change (°C)</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">United Kingdom</th>
        <td>1.912</td>
      </tr>
      <tr>
        <th scope="row">Afghanistan</th>
        <td>2.154</td>
      </tr>
      <tr>
        <th scope="row">Australia</th>
        <td>0.681</td>
      </tr>
      <tr>
        <th scope="row">Kenya</th>
        <td>1.162</td>
      </tr>
      <tr>
        <th scope="row">Honduras</th>
        <td>0.945</td>
      </tr>
      <tr>
        <th scope="row">Canada</th>
        <td>1.284</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th scope="row">Global average</th>
        <td>1.4</td>
      </tr>
    </tfoot>
  </table>
</div>

css 复制代码

[role="region"][aria-labelledby][tabindex]:focus {
  outline: 0.1em solid rgba(0, 0, 0, 0.1);
}

div[tabindex="0"][aria-labelledby][role="region"] {
  background: linear-gradient(to right, transparent 30%, rgba(255, 255, 255, 0)),
    linear-gradient(to right, rgba(255, 255, 255, 0), white 70%) 0 100%,
    radial-gradient(
      farthest-side at 0% 50%,
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0)
    ),
    radial-gradient(
        farthest-side at 100% 50%,
        rgba(0, 0, 0, 0.2),
        rgba(0, 0, 0, 0)
      )
      0 100%;
  background-repeat: no-repeat;
  background-color: #fff;
  background-size: 4em 100%, 4em 100%, 1.4em 100%, 1.4em 100%;
  background-position: 0 0, 100%, 0 0, 100%;
  background-attachment: local, local, scroll, scroll;
}