html 表头固定怎么写？-icode9专业技术文章分享

2024/12/1 6:33:00

本文主要是介绍html 表头固定怎么写？-icode9专业技术文章分享，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

要实现 HTML 表头固定，可以使用 CSS 来使表头在滚动内容时保持在可视区域内。下面是一个简单的示例，展示了如何使用 CSS 和 HTML 来实现这一效果。

示例代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>固定表头示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            padding: 10px;
            border: 1px solid #ddd;
            text-align: left;
        }
        thead {
            background-color: #f2f2f2; /* 表头背景颜色 */
            position: sticky; /* 关键属性 */
            top: 0; /* 表头固定在视口顶部 */
            z-index: 10; /* 使其位于其他内容之上 */
        }
        tbody {
            display: block; /* 让 tbody 成为块级元素 */
            max-height: 200px; /* 设置最大高度 */
            overflow-y: auto; /* 允许垂直滚动 */
        }
        tr {
            display: table; /* 保持 tr 的块状布局 */
            table-layout: fixed; /* 确保列宽一致 */
            width: 100%; /* 占满父元素 */
        }
    </style>
</head>
<body>

<h2>固定表头示例</h2>

<div>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>城市</th>
            </tr>
        </thead>
        <tbody>
            <!-- 添加大量数据以便测试滚动效果 -->
            <tr>
                <td>张三</td>
                <td>25</td>
                <td>北京</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>30</td>
                <td>上海</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>28</td>
                <td>广州</td>
            </tr>
            <!-- ... -->
            <tr>
                <td>小红</td>
                <td>22</td>
                <td>深圳</td>
            </tr>
            <tr>
                <td>小明</td>
                <td>27</td>
                <td>杭州</td>
            </tr>
            <!-- 添加更多行以增加可滾动性 -->
        </tbody>
    </table>
</div>

</body>
</html>

HTML

关键要点

position: sticky：这是实现表头固定的关键属性。它使得表头在滚动时固定在某个位置（这里是顶部 top: 0）。
tbody { display: block; }：将 tbody 设置为块级元素，允许它有自己的滚动条。
max-height 和 overflow-y: auto;：设置 tbody 的最大高度，使其在内容超出时产生垂直滚动。
z-index：设置较高的 z-index 确保表头在其他内容之上，避免被遮盖。

注意

这种方法在不同的浏览器中可能会有不同的表现，确保在主要浏览器上测试效果。
确保表格样式适合你的设计需求，可以自行调整 CSS 属性。

标签： 来源：

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

这篇关于html 表头固定怎么写？-icode9专业技术文章分享的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

html 表头固定怎么写？-icode9专业技术文章分享

示例代码

关键要点

注意

相关编程文章