页面显示数据时,如何将前两列锁定显示
时间: 2023-04-06 14:00:58 浏览: 62
您可以使用 CSS 的 position 属性和 z-index 属性来实现前两列锁定显示。具体实现方法可以参考以下代码:
HTML 代码:
```
<table>
<thead>
<tr>
<th>列1</th>
<th>列2</th>
<th>列3</th>
<th>列4</th>
<th>列5</th>
</tr>
</thead>
<tbody>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
<tr>
<td>数据6</td>
<td>数据7</td>
<td>数据8</td>
<td>数据9</td>
<td>数据10</td>
</tr>
<!-- 更多数据行 -->
</tbody>
</table>
```
CSS 代码:
```
table {
position: relative;
}
thead th:nth-child(-n+2) {
position: sticky;
left: 0;
z-index: 1;
background-color: #fff;
}
tbody td:nth-child(-n+2) {
position: sticky;
left: 0;
z-index: 1;
background-color: #f9f9f9;
}
```
这样,前两列就会在页面滚动时一直保持在左侧,不会被滚动条遮挡。