js表格的标题悬浮

在JavaScript中实现表格标题悬浮（通常指固定表头）可以通过CSS结合JavaScript来完成。以下是基础概念、优势、类型、应用场景以及实现方法的详细解释：

基础概念

固定表头是指在滚动表格内容时，表头部分保持固定不动，以便用户能够清晰地看到每一列的标题。

优势

用户体验：用户在滚动查看表格内容时，不需要不断上移视线来确认列标题。
数据展示：特别适用于数据量大、需要滚动查看的表格。

类型

纯CSS实现：通过CSS的position: sticky属性。
JavaScript辅助：结合JavaScript动态计算位置。

应用场景

数据报表
日志查看器
大数据量的表格展示

实现方法

方法一：纯CSS实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fixed Table Header</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            padding: 8px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        th {
            background-color: #f2f2f2;
            position: sticky;
            top: 0;
            z-index: 1;
        }
        tbody {
            display: block;
            overflow-y: auto;
            height: 200px; /* 设置一个固定高度以便滚动 */
        }
        thead, tbody tr {
            display: table;
            width: 100%;
            table-layout: fixed;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>Header 1</th>
                <th>Header 2</th>
                <th>Header 3</th>
            </tr>
        </thead>
        <tbody>
            <!-- 表格内容 -->
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
            </tr>
            <!-- 更多行 -->
        </tbody>
    </table>
</body>
</html>

方法二：JavaScript辅助

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fixed Table Header with JS</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            padding: 8px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        .header-fixed {
            position: fixed;
            top: 0;
            background: white;
            z-index: 1;
        }
    </style>
</head>
<body>
    <table id="myTable">
        <thead>
            <tr>
                <th>Header 1</th>
                <th>Header 2</th>
                <th>Header 3</th>
            </tr>
        </thead>
        <tbody>
            <!-- 表格内容 -->
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
            </tr>
            <!-- 更多行 -->
        </tbody>
    </table>

    <script>
        window.onload = function() {
            var table = document.getElementById("myTable");
            var thead = table.getElementsByTagName('thead')[0];
            var tbody = table.getElementsByTagName('tbody')[0];

            window.addEventListener('scroll', function() {
                if (window.pageYOffset > thead.offsetTop) {
                    thead.classList.add('header-fixed');
                } else {
                    thead.classList.remove('header-fixed');
                }
            });
        };
    </script>
</body>
</html>