Question

更新：以下建议的解决方案根本不使用任何脚本，只使用HTML和CSS来实现粘性表列标题。 这不重复。

尝试＆＃34; 运行代码段＆＃34;请（除非你在IE或FireFox中 - 它不支持这个。但是，它们没有错误地优雅地降级，但是没有粘性标题出现。重要的是没有一行JavaScript代码可以破解。）

当向下滚动列标题不在视图中的大型HTML表格时，我想让列标题粘在每个行值上方的窗口顶部，以便清除每个表格单元格的内容类型。我觉得这个功能对可用性非常重要。

这是一个 Q / A风格的问题。

此问题在很多版本中出现过，但我还没有看到这个＆＃34; 无脚本解决方案＆＃34;发布之前。以下似乎仅适用于 HTML 和 CSS - 根本不需要编写脚本。 IE / FireFox不受支持，否则它似乎适用于所有最新版本的浏览器。

道歉，如果我还没有找到相关的先前帖子。我不定期关注HTML标记。我只是想检查一下我偶然发现的是否对他人有帮助。我不是一位经验丰富的HTML开发人员。

Answer 1

如果您不使用IE或FireFox，请尝试点击＆＃34; 运行代码段＆＃34;直接在下面 - 我认为它会告诉你所需要的一切＆＃34;知道＆＃34;没有所有的唠叨。它是粘性表头，根本没有任何JavaScript。只是CSS / HTML。

我已经看到基于 JavaScript ， JQuery 和粘性HTML表格列的许多复杂解决方案 >高级CSS 。它们可能非常好，并且在几个浏览器中运行良好，但下面的方法实现起来应该非常简单（它不会变得更加简单）并且在IE11和FireFox之外的所有最新浏览器中都是本机支持的。没有复杂性可以处理。

我还经常看到按顺序使用两个表的建议，其中第一个表是固定的，仅显示列值，第二个表隐藏其列标题并仅显示值行。这看起来很笨重。

我也见过其他几种方法。

根据我的有限测试，以下版本适用于最新版本的 Edge ， Chrome ， Opera 和 Vivaldi ，但在 IE 或 FireFox 中不（不会显示任何错误，也不会有任何粘性标题 - 它会优雅地降级）。我没有设置足够的测试资源来完全验证兼容性。重要的是，没有一行JavaScript代码可以破解。

这个＆＃34;解决方案的核心＆＃34;是 CSS提取：

th {
     position: sticky;
     top: 0px;
}

这似乎会使表标题单元格<th>坚持其父div的顶部边框（top: 0px），这显然是实现粘性列标题所需的全部内容。最新的浏览器版本。

此外，您可以在流程中添加几个div，每个div都有自己的表格，或者您可以在同一个div中放置几个表格。它似乎可以自动运行。

我有一个启用了排序的大型测试表，当你点击粘性标题时，排序也可以正常工作。

下面的样本已经减少到最小，同时仍然试图对整体方法进行适当的测试。我将使用较长的表格发布第二个答案，其中包含适当的thead和tbody部分（在此简单示例中排除）。

＆＃13;

#testdiv {
background-color: wheat;
height: 180px;
width: 600px; /* Try commenting this out as well */
overflow: scroll;
}

th {
/* The two core settings for sticky table headers */
position: sticky;
top: 0px;

/* A few more settings for better display*/
background-color: purple;
color: white;
white-space: nowrap;
border: 1px solid black;
text-align: left;
}

table, td {
border-collapse: collapse;
border: 1px solid black;
white-space: nowrap; /* Try commenting this out as well */
}

＆＃13;

<div id="testdiv">

<p>Just a leading paragraph for demonstration.</p>
<p>Scroll down and sideways to check the sticky table headers.</p>

<table id='testtable'>
    <tr>
        <th>This is the first column:</th>
        <th>Column Two:</th>
        <th>Third in line here:</th>
    </tr>
    <tr>
        <td>A summer night a long time ago I saw a fox chase a firefly.</td>
        <td>A winter night a long long time ago, I watched the aurora borealis dance in the sky.</td>
        <td>Hello world.</td>
    </tr>
    <tr>
        <td>What is your favorite color?</td>
        <td>Time's Arrow.</td>
        <td>Just a short while ago I was young.</td>
    </tr>
    <tr>
        <td colspan="3">This is a colspan.</td>
    </tr>
    <tr>
        <td>Live long and prosper.</td>
        <td>Kosmonaut.</td>
        <td>What is the airspeed velocity of an unladen swallow?</td>
    </tr>
    <tr>
        <td>A base in space, just to protect the human race.</td>
        <td>Unimatrix Zero.</td>
        <td>Are there any women here?</td>
    </tr>
    <tr>
        <td>Raven.</td>
        <td>Beware, here be dragons.</td>
        <td>Timeless.</td>
    </tr>
    <tr>
        <td>Astronaut.</td>
        <td>42</td>
        <td>HTML and CSS, the fiddliest of endeavours.</td>
    </tr>
    <tr>
        <td rowspan="3">This is rowspan.</td>
        <td>Oh my God.</td>
        <td>777</td>
    </tr>
    <tr>
        <td>Holy Crap.</td>
        <td>778</td>
    </tr>
    <tr>
        <td>The neighbour of the beast.</td>
        <td>668</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>

    <tr>
        <td colspan="2" rowspan="2">This is colspan and rowspan.</td>
        <td>1</td>
    </tr>
    <tr>
        <td>1</td>
    </tr>
    <tr>
        <td>Three</td>
        <td>Columns</td>
        <td>Here</td>
    </tr>

</table>

<p>A trailing paragraph for demonstration.</p>
<p>A trailing paragraph for demonstration.</p>
<p>A trailing paragraph for demonstration.</p>
<p>A trailing paragraph for demonstration.</p>       
<p>A trailing paragraph for demonstration.</p>

</div>

＆＃13;

滚动浏览大表

1 个答案: