冻结顶部列（标题列）

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的固定桌面解决方案，带有check this（优雅和个人喜爱）。单击第一行使其变为粘性：

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

这是一个使用JavaScript的解决方案（不那么优雅但具有更多可用性）。这个支持多个行粘在顶部。再次点击一行来粘贴它：

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;