CSS固定表格第一列|极客教程

CSS固定表格第一列

在网页开发中，表格是常用的元素之一，用于展示和比较数据。但是当表格的行数非常多时，用户滚动到底部时，表格的列标题会消失在可视区域之外，造成用户无法很好地查看数据。为了解决这个问题，我们可以使用CSS来固定表格的第一列，让用户在滚动时依然能看到表格的关键列信息。

实现原理

要实现固定表格的第一列，我们需要做的事情是将表格拆分成两部分：固定列和可滚动内容。固定列包含表格的第一列，用于显示列名或者其他重要信息；可滚动内容包含表格的其余部分，用户可以通过滚动来查看。

HTML结构

首先，我们需要准备一个包含表格的div容器，并在其中写入表格的HTML结构。以下是一个简单的示例：

<div class="table-container">
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>城市</th>
                <th>性别</th>
                <th>职业</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>25</td>
                <td>北京</td>
                <td>男</td>
                <td>工程师</td>
            </tr>
            <!-- more rows... -->
        </tbody>
    </table>
</div>

CSS样式

接下来，我们使用CSS来实现固定表格的第一列效果。首先，我们需要设置表格容器的样式，并将表格拆分成固定列和可滚动内容两部分。具体代码如下：

.table-container {
    overflow: auto;
    height: 300px; /* 设置表格高度 */
}

table {
    width: 100%; /* 设置表格宽度 */
    border-collapse: collapse;
}

td, th {
    border: 1px solid #ddd; /* 设置单元格边框样式 */
    padding: 8px; /* 设置单元格内边距 */
}

thead th {
    background-color: #f2f2f2; /* 设置表头背景颜色 */
}

.fixed-column {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fff; /* 设置固定列背景颜色 */
}

在上面的代码中，我们设置了表格容器的样式，使其具备滚动条功能。然后，我们给固定列添加了fixed-column类以便后续样式的修改。接下来，我们需要使用JavaScript来实现固定表格的第一列。

JavaScript脚本

我们使用JavaScript来实现将表格的第一列固定在左侧的功能。具体实现如下：

document.addEventListener("DOMContentLoaded", function() {
    const tableContainer = document.querySelector(".table-container");
    const table = tableContainer.querySelector("table");
    const firstColumn = table.querySelectorAll("tr td:first-child");

    const fixedColumn = document.createElement("div");
    fixedColumn.classList.add("fixed-column");

    firstColumn.forEach((item, index) => {
        const clone = item.cloneNode(true);
        fixedColumn.appendChild(clone);
    });

    tableContainer.appendChild(fixedColumn);
});