css - 卡住顶栏(标题栏)

Question

在 node.js 应用程序中:有没有一种方法可以像在 Excel 中那样在浏览器中卡住表格的第一行，即标题行？

我怀疑这是一个 .css 样式，但不确定该怎么做。 fixed “卡住”整个表格，而不仅仅是顶行，因为当元素出现在浏览器窗口的不可见部分时，不会出现垂直滚动条以便能够看到它们。 sticky 在这种情况下似乎什么都不做。

.css

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

应用程序.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>