学习使用html中table实现内容滚动下拉表头和左右滑动前四列固定不动的方法代码整理
warning:
这篇文章距离上次修改已过186天，其中的内容可能已经有所变动。
在HTML中，要实现一个表格内容滚动且左侧四列固定的效果，可以使用CSS来控制表格的样式。以下是一个简单的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Scrollable Table with Fixed Columns</title>
<style>
.scrollable-table {
width: 100%;
border-collapse: collapse;
overflow-x: auto;
display: block;
}
.scrollable-table th,
.scrollable-table td {
border: 1px solid #ddd;
padding: 8px;
background: #f9f9f9;
}
.scrollable-table thead th {
position: sticky;
top: 0;
background: #fff;
z-index: 10;
}
.scrollable-table tbody tr:nth-child(even) {
background: #f2f2f2;
}
.scrollable-table tbody {
display: block;
height: 230px;
overflow-y: scroll;
}
.scrollable-table tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}
.scrollable-table thead,
.scrollable-table tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}
.scrollable-table thead th:nth-child(-n+4),
.scrollable-table tbody td:nth-child(-n+4) {
background: #f0f0f0;
position: sticky;
left: 0;
z-index: 1;
}
</style>
</head>
<body>
<table class="scrollable-table">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
<th>Column 6</th>
</tr>
</thead>
<tbody>
<!-- Add multiple rows here -->
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
<!-- Repeat as needed -->
</tbody>
</table>
</body>
</html>这段代码定义了一个.scrollable-table类，它将应用于你的表格元素。CSS规则确保了表头是固定的，左侧的四列也是固定的，而表格的主体是可以滚动的。当你向<tbody>部分添加更多的行时，表格的滚动功能将正常工作。
评论已关闭