table 固定显示顶部

曹振华

已于 2024-08-01 17:59:57 修改

阅读量333

点赞数 2

CC 4.0 BY-SA版权

分类专栏： html css 文章标签： css table 表头固定

于 2024-08-01 14:07:14 首次发布

本文链接：https://blog.youkuaiyun.com/chadcao/article/details/140846279

css实现table 固定显示顶部

<style>
    .table-container {
        overflow-x: auto; /* 水平滚动 */
        max-height: 400px; /* 设置表格容器的最大高度，以便有滚动条出现 */
        position: relative;
    }
 
    table {
        width: 100%;
        border-collapse: collapse;
    }
 
    th, td {
        padding: 8px;
        text-align: center;
		height: 100px;
    }
 
    .sticky-header {
        position: sticky;
        top: 0;
        background-color: #f2f2f2;
        z-index: 1;
    }
</style>
 
<div class="table-container">
    <table>
        <thead class="sticky-header">
            <tr>
                <th rowspan="2">列头1</th>
                <th colspan="2">列头2</th>
            </tr>
			<tr>
			    <th>列头21</th>
			    <th>列头22</th>
			</tr>
        </thead>
        <tbody>
            <tr>
                <td>数据1</td>
                &