要实现一个有2列的表格,其中第二列可滚动,可以使用以下的CSS样式和HTML代码:
CSS样式:
.table-container {
width: 100%;
overflow-x: scroll;
}
.table {
width: 100%;
border-collapse: collapse;
}
.table th,
.table td {
padding: 8px;
border: 1px solid #ccc;
}
.table th:nth-child(1),
.table td:nth-child(1) {
width: 30%;
}
.table th:nth-child(2),
.table td:nth-child(2) {
width: 70%;
}
HTML代码:
列1
列2
行1列1
行1列2
行2列1
行2列2
行3列1
行3列2
在这个例子中,我们将表格包裹在一个带有滚动条的容器中,并使用CSS样式来控制表格的样式。第一列的宽度设置为30%,第二列的宽度设置为70%,可以根据实际需要进行调整。使用overflow-x: scroll;
可以在第二列超出容器宽度时显示滚动条。