冻结顶部列（标题列）

Question

在 node.js 应用程序中：有没有办法像在 Excel 中那样在浏览器中冻结表格的顶行、标题行？

我怀疑这是 .css 样式，但不知道该怎么做。 fixed“冻结”整个表格，而不仅仅是顶行，因为项目出现在浏览器窗口的不可见部分，没有垂直滚动条出现以便能够看到它们。在这种情况下，sticky 似乎什么都不做。

.css

#one {
  position: fixed;
  top: 100px;
  left: 15px;
}

app.js

<div className="row" id="one">
            <table className="table-hover">
                <thead>

Answer 1

这是一个类似 Excel 的固定桌头的解决方案，带有position: sticky;（优雅且个人喜爱）。点击第一行使其变粘：

th, td {
    width: 100px;
    height: 100px;
    background-color: #eee;
    text-align: center;
    border-bottom: 2px solid transparent;
}
tr.sticks {
    cursor: pointer;
}
tr.stuck th {
    position: sticky;
    top: 0px;
    border-bottom: 2px solid #000;
}

<table>
    <tbody>
        <tr class="sticks" onclick='this.className = this.className == "sticks" ? "sticks stuck" : "sticks";'>
            <th> Name </th>
            <th> Amount </th>
            <th> Date </th>
            <th> Color </th>
        </tr>
        <tr>
            <td> A </td>
            <td> B </td>
            <td> C </td>
            <td> D </td>
        </tr>
        <tr>
            <td> A </td>
            <td> B </td>
            <td> C </td>
            <td> D </td>
        </tr>
        <tr>
            <td> A </td>
            <td> B </td>
            <td> C </td>
            <td> D </td>
        </tr>
        <tr>
            <td> A </td>
            <td> B </td>
            <td> C </td>
            <td> D </td>
        </tr>
        <tr>
            <td> A </td>
            <td> B </td>
            <td> C </td>
            <td> D </td>
        </tr>
        <tr>
            <td> A </td>
            <td> B </td>
            <td> C </td>
            <td> D </td>
        </tr>
    </tbody>
</table>

---

这是一个使用 JavaScript 的解决方案（不那么优雅，但更实用）。这个支持多于一排被粘在顶部。再次，单击一行以粘贴它：

td {
    width: 100px;
    height: 100px;
    background-color: #eee;
    text-align: center;
    border-bottom: 2px solid transparent;
}
#table-head {
    top: 0px;
    position: fixed;
}
#table-head td {
    border-bottom: 2px solid #000;
    background-color: #ddd;
}

<table id="table">
    <thead id="table-head"></thead>
    <tbody id="table-body">
        <tr onclick="stick_it(this);">
            <td> A </td>
            <td> B </td>
            <td> C </td>
            <td> D </td>
        </tr>
        <tr onclick="stick_it(this);">
            <td> A </td>
            <td> B </td>
            <td> C </td>
            <td> D </td>
        </tr>
        <tr onclick="stick_it(this);">
            <td> A </td>
            <td> B </td>
            <td> C </td>
            <td> D </td>
        </tr>
        <tr onclick="stick_it(this);">
            <td> A </td>
            <td> B </td>
            <td> C </td>
            <td> D </td>
        </tr>
        <tr onclick="stick_it(this);">
            <td> A </td>
            <td> B </td>
            <td> C </td>
            <td> D </td>
        </tr>
        <tr onclick="stick_it(this);">
            <td> A </td>
            <td> B </td>
            <td> C </td>
            <td> D </td>
        </tr>
        <tr onclick="stick_it(this);">
            <td> A </td>
            <td> B </td>
            <td> C </td>
            <td> D </td>
        </tr>
        <tr onclick="stick_it(this);">
            <td> A </td>
            <td> B </td>
            <td> C </td>
            <td> D </td>
        </tr>
    </tbody>
</table>
<script type="text/javascript">
    var table_head = document.getElementById("table-head");
    var table_body = document.getElementById("table-body");
    var stick_it = function(el) {
        var row_html = el.outerHTML.replace("stick_it(this);", "unstick_it(this);");
        el.remove();
        table_head.innerHTML += row_html;
        table.style.paddingTop = table_head.children.length * 104 + "px";
    }
    var unstick_it = function(el) {
        var row_html = el.outerHTML.replace("unstick_it(this);", "stick_it(this);");
        el.remove();
        table_body.innerHTML += row_html;
        table.style.paddingTop = table_head.children.length * 104 + "px";
    }
</script>