首页 > 代码库 > 实现html表头固定，表格内的信息向上滚动

实现html表头固定，表格内的信息向上滚动

2024-10-07 07:29:02   216人阅读

效果如下：

<!doctype html>Table

<style>.table { width: 100%; border-collapse: collapse; border-spacing: 0 } .fixedThead { display: block; width: 100% } .scrollTbody { display: block; height: 262px; overflow: auto; width: 100% } .table td,.table th { width: 200px; border-bottom: none; border-left: none; border-right: 1px solid #CCC; border-top: 1px solid #DDD; padding: 2px 3px 3px 4px } .table tr { border-left: 1px solid #EB8; border-bottom: 1px solid #B74 } thead.fixedThead tr th:last-child { color: #FF0000; width: 218px }</style>
headerheader two
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2
fuck 1 fuck 2

源码如下：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Table</title>
    <style type="text/css">
        .table{
            width: 100%;
            border-collapse:collapse; 
            border-spacing:0; 
        }
        .fixedThead{
            display: block;
            width: 100%;
        }
        .scrollTbody{
            display: block;
            height: 262px;
            overflow: auto;
            width: 100%;
        }
        .table td,.table th {
            width: 200px;
            border-bottom: none;
            border-left: none;
            border-right: 1px solid #CCC;
            border-top: 1px solid #DDD;
            padding: 2px 3px 3px 4px
        }
        .table tr{
            border-left: 1px solid #EB8;
            border-bottom: 1px solid #B74;
        }
        thead.fixedThead tr th:last-child {
            color:#FF0000;
            width: 218px;
        }
    </style>
</head>
<body >
    <table class="table">
        <thead class="fixedThead">
            <tr><th>header</th><th>header two</th></tr>
        </thead>
        <tbody class="scrollTbody">
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
        </tbody>
    </table>
</body>
</html>

 

实现html表头固定，表格内的信息向上滚动


联系
我们