垫表垂直滚动固定标题

在网页中，我们有时需要一个长表格来展示大量数据。而当表格过长时，用户可能会忘记每一列的含义。为了解决这个问题，我们可以为表格添加一个固定的表头。

但是，如果表格有大量行时，就不能仅仅只滚动一个单独的表格了。那么我们该如何滚动呢？这时就需要使用垫表固定的技术。

垫表固定和普通的表格不同，它包含两个表格：一个负责显示数据，另一个只显示标题行。当用户滚动始终表时，标题行就会固定在网页的顶部，方便用户阅读。

下面是一个简单的例子：

<div class="table-container">
    <table class="table">
        <thead>
            <tr>
                <th>标题1</th>
                <th>标题2</th>
                <th>标题3</th>
                <th>标题4</th>
                <th>标题5</th>
                <th>标题6</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>内容1</td>
                <td>内容2</td>
                <td>内容3</td>
                <td>内容4</td>
                <td>内容5</td>
                <td>内容6</td>
            </tr>
            <!-- 其他行 -->
        </tbody>
    </table>
    <table class="header-table">
        <thead>
            <tr>
                <th>标题1</th>
                <th>标题2</th>
                <th>标题3</th>
                <th>标题4</th>
                <th>标题5</th>
                <th>标题6</th>
            </tr>
        </thead>
    </table>
</div>

在这里，我们通过两个表格来实现垫表固定。外部的div包含两个表格，其中class为table的表格负责展示数据，而class为header-table的表格则只显示标题行。通过调整它们的样式，固定标题行的位置，从而实现滚动时标题行的固定。

在CSS中，我们可以使用position: fixed来固定表头的位置。还需要注意一下其他样式的设置，确保表格正常显示。

.table-container {
    position: relative;
}

.table {
    width: 100%;
    margin-bottom: 0;
    border-collapse: collapse;
}

.header-table {
    position: fixed;
    top: 0;
    left: 0;
    visibility: hidden;
    border-collapse: collapse;
    width: 100%;
}

.header-table th {
    background-color: white;
    text-align: center;
    border: 1px solid #ddd;
    font-weight: normal;
}

.table > tbody > tr > td,
.table > thead > tr > th {
    text-align: center;
    vertical-align: middle;
    border: 1px solid #ddd;
}

至此，我们已经成功实现了垫表垂直滚动固定标题的效果。

Markdown 返回代码片段

# 垫表垂直滚动固定标题

在网页中，我们有时需要一个长表格来展示大量数据。而当表格过长时，用户可能会忘记每一列的含义。为了解决这个问题，我们可以为表格添加一个固定的表头。

但是，如果表格有大量行时，就不能仅仅只滚动一个单独的表格了。那么我们该如何滚动呢？这时就需要使用垫表固定的技术。

垫表固定和普通的表格不同，它包含两个表格：一个负责显示数据，另一个只显示标题行。当用户滚动始终表时，标题行就会固定在网页的顶部，方便用户阅读。

下面是一个简单的例子：

```html
<div class="table-container">
    <table class="table">
        <thead>
            <tr>
                <th>标题1</th>
                <th>标题2</th>
                <th>标题3</th>
                <th>标题4</th>
                <th>标题5</th>
                <th>标题6</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>内容1</td>
                <td>内容2</td>
                <td>内容3</td>
                <td>内容4</td>
                <td>内容5</td>
                <td>内容6</td>
            </tr>
            <!-- 其他行 -->
        </tbody>
    </table>
    <table class="header-table">
        <thead>
            <tr>
                <th>标题1</th>
                <th>标题2</th>
                <th>标题3</th>
                <th>标题4</th>
                <th>标题5</th>
                <th>标题6</th>
            </tr>
        </thead>
    </table>
</div>

在这里，我们通过两个表格来实现垫表固定。外部的div包含两个表格，其中class为table的表格负责展示数据，而class为header-table的表格则只显示标题行。通过调整它们的样式，固定标题行的位置，从而实现滚动时标题行的固定。

在CSS中，我们可以使用position: fixed来固定表头的位置。还需要注意一下其他样式的设置，确保表格正常显示。

.table-container {
    position: relative;
}

.table {
    width: 100%;
    margin-bottom: 0;
    border-collapse: collapse;
}

.header-table {
    position: fixed;
    top: 0;
    left: 0;
    visibility: hidden;
    border-collapse: collapse;
    width: 100%;
}

.header-table th {
    background-color: white;
    text-align: center;
    border: 1px solid #ddd;
    font-weight: normal;
}

.table > tbody > tr > td,
.table > thead > tr > th {
    text-align: center;
    vertical-align: middle;
    border: 1px solid #ddd;
}

至此，我们已经成功实现了垫表垂直滚动固定标题的效果。