要解决表格的第一列跳出overflow-y:auto的问题,可以使用CSS的position属性来实现。以下是一个示例代码:
HTML代码:
第一列
第二列
第三列
数据1
数据2
数据3
数据4
数据5
数据6
CSS代码:
.table-container {
position: relative;
width: 100%;
height: 200px; /* 设置表格容器的高度 */
overflow: auto;
}
.table-container th:first-child,
.table-container td:first-child {
position: sticky;
left: 0;
background-color: #fff; /* 设置背景色以避免覆盖其他内容 */
}
上述代码中,我们给表格容器(.table-container)设置了相对定位,并设置了固定的宽度和高度。然后,我们使用overflow:auto来创建一个滚动容器。
接下来,我们使用CSS的position:sticky来将第一列的表头和单元格固定在左侧。我们使用:first-child伪类选择器来选中第一列的表头(th:first-child)和单元格(td:first-child),并给它们设置position:sticky和left:0。
这样,当表格的内容超出表格容器的高度时,只有第一列会出现纵向滚动条,其他列仍然保持在容器中。
下一篇:表格的第一行没有应用SP。