HTML table表头固定

作者：System 时间：2024年08月12日分类：所有,html 字数：1073

要实现HTML表格的表头固定，可以使用CSS的position: sticky属性。以下是一个简单的示例，演示如何固定表头：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky Table Header</title>
<style>
    th {
        background-color: #f9f9f9;
        position: sticky;
        top: 0;
        z-index: 10;
    }
    table {
        border-collapse: collapse;
        width: 100%;
    }
    th, td {
        border: 1px solid black;
        padding: 10px;
        text-align: left;
    }
</style>
</head>
<body>
 
<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
    </thead>
    <tbody>
        <!-- Add multiple rows with data -->
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
        </tr>
        <!-- More rows... -->
    </tbody>
</table>
 
</body>
</html>

在这个示例中，表头（th元素）被设置了position: sticky和top: 0，这样当表格滚动至顶部时，表头会固定在顶部。z-index属性确保表头在表格内容之上显示。

HTML table表头固定

评论已关闭

推荐阅读