首页使用原生的table固定第一列，并且table超出可以滚动

使用原生的table固定第一列，并且table超出可以滚动

时间: 2024-02-09 12:08:20 浏览: 94

可以通过以下步骤实现使用原生的 table 固定第一列，并且 table 超出可以滚动： 1. 在 table 外层包裹一个 div，设置 div 的宽度和高度，并且添加 overflow 属性为 auto。 2. 将 table 分成两个部分，第一部分只包含第一列，第二部分包含剩余的列。 3. 使用 CSS 设置第一部分的宽度和样式，使其能够固定在左侧；设置第二部分的样式，使其能够与第一部分对齐。下面是一个简单的例子代码，可以实现 table 固定第一列，并且 table 超出可以滚动： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>固定第一列的表格</title> <style> .table-wrapper { width: 300px; height: 200px; overflow: auto; } .table-wrapper table { border-collapse: collapse; width: 100%; } .table-wrapper td, .table-wrapper th { padding: 10px; border: 1px solid #ccc; } .table-wrapper td:first-child, .table-wrapper th:first-child { position: sticky; left: 0; z-index: 1; background-color: #fff; } .table-wrapper td:not(:first-child), .table-wrapper th:not(:first-child) { background-color: #f5f5f5; } </style> </head> <body> <div class="table-wrapper"> <table> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>地址</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>20</td> <td>男</td> <td>北京</td> </tr> <tr> <td>李四</td> <td>25</td> <td>女</td> <td>上海</td> </tr> <tr> <td>王五</td> <td>30</td> <td>男</td> <td>深圳</td> </tr> <tr> <td>赵六</td> <td>35</td> <td>女</td> <td>广州</td> </tr> </tbody> </table> </div> </body> </html> ``` 这段代码会生成一个包含固定第一列的 table，当 table 内容超出 div 的宽度和高度时，div 会出现滚动条。你可以根据自己的需求进行调整。

阅读全文