在进行数据处理和分析时，表格是不可避免的工具。但是，处理大量数据时，常常会遇到一个让人头疼的问题：长长的表格需要滚动才能查看全部数据，表头也会随之滚动消失。这不仅让人感到不方便，而且不利于数据的分析和处理。而固定表头可以很好地解决这个问题。下面，我们来看看表格怎么固定表头的方法。

固定表头的方法

固定表头，让表头在浏览器窗口内始终可见，需要借助 CSS 和 JavaScript 等前端技术。这里我们介绍两种方法。

利用 CSS 固定表头

CSS 是一门最基础、最核心的前端技术。可以通过给表格添加一些样式，使表格的表头固定在页面上方。代码如下：

<style>
    .table-wrapper {
        position: relative;
        max-width: 100%;
        overflow: auto;
    }

    .table-wrapper table {
        position: relative;
        white-space: nowrap;
        border-collapse: collapse;
        width: 100%;
        max-width: 100%;
        display: table;
    }

    .table-wrapper thead th {
        position: sticky;
        top: 0;
    }

    .table-wrapper td,
    .table-wrapper th {
        padding: 12px 15px;
    }

    .table-wrapper th {
        font-weight: bold;
        text-align: left;
        background-color: #f0f0f0;
    }
</style>
<div>
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Sex</th>
                <th>Country</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tom</td>
                <td>18</td>
                <td>Male</td>
                <td>USA</td>
            </tr>
            <tr>
                <td>Alex</td>
                <td>20</td>
                <td>Male</td>
                <td>Canada</td>
            </tr>
            <tr>
                <td>Lucy</td>
                <td>23</td>
                <td>Female</td>
                <td>UK</td>
            </tr>
            <tr>
                <td>Jenny</td>
                <td>22</td>
                <td>Female</td>
                <td>Australia</td>
            </tr>
            <tr>
                <td>Jim</td>
                <td>27</td>
                <td>Male</td>
                <td>France</td>
            </tr>
        </tbody>
    </table>
</div>

在上述代码中，.table-wrapper 类定义了表格的容器，max-width 是容器的宽度，在超出容器宽度时可以滚动显示表格。overflow 属性用于控制表格容器的溢出行为。table 单元格采用了 white-space: nowrap，这样表格过宽时就不会自动换行了。

thead 元素中 th 单元格采用了 position: sticky; top: 0;，让表头在浏览器窗口内始终可见。这就是关键所在了。

利用 JavaScript 固定表头

对于较为复杂的表格，我们可以借助 JavaScript 库完成表格的固定。这里介绍一个名为 DataTables 的库，它可以让我们在表格的上方添加搜索框、显示条目数、分页符等控件，并且提供了表格排序、过滤、查找等功能。

首先，我们需要在头部引入 DataTables 的 CSS 和 JS 文件：

<link rel="stylesheet" href="//cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
<script src="/pic.php?url=//cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>

然后，对要固定表头的表格进行初始化：

$(document).ready(function(){
    $('#myTable').DataTable({
        fixedHeader: true
    });
});

这里我们以一个简单的表格为例：

<table id="myTable">
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Sex</th>
            <th>Country</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tom</td>
            <td>18</td>
            <td>Male</td>
            <td>USA</td>
        </tr>
        <tr>
            <td>Alex</td>
            <td>20</td>
            <td>Male</td>
            <td>Canada</td>
        </tr>
        <tr>
            <td>Lucy</td>
            <td>23</td>
            <td>Female</td>
            <td>UK</td>
        </tr>
        <tr>
            <td>Jenny</td>
            <td>22</td>
            <td>Female</td>
            <td>Australia</td>
        </tr>
        <tr>
            <td>Jim</td>
            <td>27</td>
            <td>Male</td>
            <td>France</td>
        </tr>
    </tbody>
</table>

通过以上步骤，我们就可以实现对表格进行固定表头的操作了。

小结

本文介绍了两种对表格进行固定表头的方法：利用 CSS 和利用 JavaScript。这两种方法各具优缺点，可以根据实际情况选择。对于较为简单的表格，可以选择利用 CSS 进行控制；对于较为复杂的表格，可以选择利用 DataTables（或其他类似库）进行控制。希望本文能够为大家提供参考。