通过 `position: sticky` 可以很容易实现固定表头的表格。

```css
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fff;
  border: 1px solid #000;
}
```

| 项目        | 价格   |  数量  |
| --------   | -----:  | :----:  |
| 计算机     | ￥1600 |   5     |
| 手机        |   ￥12   |   12   |
| 管线        |    ￥$1    |  234  |
| 计算机     | ￥1600 |   5     |
| 手机        |   ￥12   |   12   |
| 管线        |    ￥$1    |  234  |
| 计算机     | ￥1600 |   5     |
| 手机        |   ￥12   |   12   |
| 管线        |    ￥$1    |  234  |
| 计算机     | ￥1600 |   5     |
| 手机        |   ￥12   |   12   |
| 管线        |    ￥$1    |  234  |

<iframe src="https://codesandbox.io/embed/dazzling-elgamal-o9nho?fontsize=14&hidenavigation=0&theme=dark"
     style="width:100%; height:420px; border:0; border-radius: 4px; overflow:hidden;"
     title="dazzling-elgamal-o9nho"
     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   ></iframe>

几行 CSS 实现固定表头的表格。

CSS 实现固定表头表格