冻结顶部列（标题列）

Posted 2023-02-22

【中文标题】冻结顶部列（标题列）

【英文标题】：Freeze top column (title columns)

【发布时间】：2017-07-16 14:52:07

【问题描述】：

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

【问题讨论】：

也许看看position: sticky

感谢您确实修复了该行。不幸的是，当有动态添加到下方表格中的项目在窗口中不可见时，垂直滚动条不会出现。

查看已编辑的原始帖子。

给我一些时间，我会试着为你做一个sn-p c:

【参考方案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>

【讨论】：

我无法让它在 node.js/express/react 的上下文中为我工作，但你的解决方案显然有效，所以我必须弄清楚如何移植它。谢谢。