HTML table表头固定

最新推荐文章于 2025-03-21 21:35:34 发布

普罗旺斯.

最新推荐文章于 2025-03-21 21:35:34 发布

阅读量1.5k

点赞数 1

分类专栏：前端文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/qq_42700109/article/details/133361163

版权

前端专栏收录该内容

21 篇文章

订阅专栏

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>HTML table表头固定</title>
    <style>
	    .table{
		    border-collapse:collapse;
		    border-right: 1px solid #000000;
	        border-top: 1px solid #000000;
	        border-bottom: 1px solid #000000;
	        text-align: center;
	    }

	    .table th {
	        border-left: 1px solid #000000;
	        border-bottom: 1px solid #000000;
	    }
	    
	    .table td {
	        border-left: 1px solid #000000;
	        border-bottom: 1px solid #000000;
	    }
	    
        .table tbody {
            display: block;
            height: 100px;
            overflow-y: scroll;
            -webkit-overflow-scrolling: touch; // 为了滚动顺畅 
        }
        .table thead, tbody tr {
            display: table;
            width: 100%;
            table-layout: fixed;
        }

		.table tbody::-webkit-scrollbar {
		    display: none; // 隐藏滚动条，不需要可取消
		}
		
        .table thead th {
            background: #ccc;
        }

    </style>
</head>

<body>

<table class='table'>
    <thead>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>出生年月</th>
        <th>手机号码</th>
        <th>单位</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>张三</td>
        <td>18</td>
        <td>1990-09-09</td>
        <td>12312341234</td>
        <td>阿里巴巴</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>18</td>
        <td>1992-12-08</td>
        <td>12312341234</td>
        <td>阿里巴巴与四十大盗</td>
    </tr>
    <tr>
        <td>王五</td>
        <td>18</td>
        <td>2000-05-01</td>
        <td>12312341234</td>
        <td>腾讯科技</td>
    </tr>
    <tr>
        <td>张三二</td>
        <td>18</td>
        <td>1994-01-25</td>
        <td>12312341234</td>
        <td>浏阳河就业</td>
    </tr>
    <tr>
        <td>李四二</td>
        <td>18</td>
        <td>1990-9-9</td>
        <td>12312341234</td>
        <td>阿里巴巴</td>
    </tr>
    <tr>
        <td>王五二</td>
        <td>18</td>
        <td>1990-9-9</td>
        <td>12312341234</td>
        <td>阿里巴巴</td>
    </tr>
    <tr>
        <td>张大三</td>
        <td>18</td>
        <td>1990-9-9</td>
        <td>12312341234</td>
        <td>阿里巴巴</td>
    </tr>
    <tr>
        <td>李大四</td>
        <td>18</td>
        <td>1990-9-9</td>
        <td>12312341234</td>
        <td>阿里巴巴</td>
    </tr>
    <tr>
        <td>王大五</td>
        <td>18</td>
        <td>1990-9-9</td>
        <td>12312341234</td>
        <td>阿里巴巴</td>
    </tr>
    </tbody>
</table>
</body>
</html>

在这里插入图片描述