CSS 控制table 滑动及调整列宽等问题总结
时间: 2023-10-08 16:05:10 浏览: 57
控制 table 滑动可以通过设置 table 的 overflow 属性为 auto 或者 scroll,例如:
```css
table {
overflow: auto;
}
```
调整列宽可以通过设置 table-layout 为 fixed,并设置每一列的宽度,例如:
```css
table {
table-layout: fixed;
}
th:nth-child(1),
td:nth-child(1) {
width: 100px;
}
th:nth-child(2),
td:nth-child(2) {
width: 200px;
}
...
```
如果想要自适应列宽,可以设置 table-layout 为 auto,并设置每一列的最小宽度,例如:
```css
table {
table-layout: auto;
}
th:nth-child(1),
td:nth-child(1) {
min-width: 100px;
}
th:nth-child(2),
td:nth-child(2) {
min-width: 200px;
}
...
```
对于固定表头的情况,可以使用 position: sticky,例如:
```css
table thead th {
position: sticky;
top: 0;
background-color: white;
}
```
这样表头就会固定在页面顶部,不会随着滚动条滚动。
总结如下:
- 控制 table 滑动:设置 table 的 overflow 属性为 auto 或者 scroll。
- 调整列宽:设置 table-layout 为 fixed,或者设置每一列的宽度、最小宽度。
- 固定表头:使用 position: sticky。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)