table表头固定，表格数据内容滚动_css表格表头固定表身内容进来了-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_23564667/article/details/123006115

目的：方便运营人员查看第二屏的数据，能直观的查看数据对应关系

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table表头固定</title>
    <style>
        table{
            border-collapse: collapse;
            border-spacing: 0;
        }
        table tbody {
            height: 180px;
            display: block;
            overflow-y: scroll;
        }
        table thead, tbody tr {
            display: table;
            table-layout: fixed;
            width: 100%;
        }
        table thead {
            width: calc(100% - 8px);
        }
        table th, tbody td {
            box-sizing: border-box;
            text-align: center;
            border: 1px solid #ddd;
            border-top: 0;
        }
    </style>
</head>
<body>
<div style="width:100%;height: 200px;">
    <table class="iceui-table">
        <thead>
        <tr>
            <th>日期</th>
            <th>客户端</th>
            <th>美金金额</th>
            <th>话费金额</th>
            <th>提现现金</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>2022-02-18</td>
            <td>安卓</td>
            <td>$5</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>2022-02-18</td>
            <td>安卓</td>
            <td>$5</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>2022-02-18</td>
            <td>安卓</td>
            <td>$5</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>2022-02-18</td>
            <td>安卓</td>
            <td>$5</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>2022-02-18</td>
            <td>安卓</td>
            <td>$5</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>2022-02-18</td>
            <td>安卓</td>
            <td>$5</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>2022-02-18</td>
            <td>安卓</td>
            <td>$5</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>2022-02-18</td>
            <td>安卓</td>
            <td>$5</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>2022-02-18</td>
            <td>安卓</td>
            <td>$5</td>
            <td>4</td>
            <td>5</td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>