CSS可以帮助我们让表格出现滚动条,特别是当表格非常长并且所有列不适合在一页上显示。下面是一些CSS代码可以让表格出现滚动条。

/* 添加以下样式,即可让表格出现水平和垂直滚动条 */
table {
overflow: auto;
display: block;
/* 为表格添加一些间距和边框 */
padding: 20px;
border: 1px solid #ddd;
}
/* 添加以下样式,即可让表格的表头固定在顶部 */
thead {
position: sticky;
top: 0;
background-color: #fff;
}
/* 添加以下样式,即可让表格的行固定在左侧 */
tbody {
position: sticky;
left: 0;
background-color: #fff;
box-shadow: inset -10px 0 10px -10px rgba(0,0,0,0.5);
}
/* 如果对于表格的垂直滚动条不想出现的话,可以添加以下样式 */
tbody::-webkit-scrollbar {
display: none;
}

来源:前端老白

Posted in CSS.