可滚动的 html 表格通过粘性标题滚动

Question

使用 HTML 和 CSS 创建可滚动表格时，表格主体会滚动到粘性表格标题后面，并且在标题上方至少部分可见。

已经有很多类似的问题了。对我帮助最大的是这个。如果在撰写本文时我有足够的业力，我只会在该特定问题中评论我的解决方案。看到这个问题发生的频率和被询问的频率，我决定以这种方式贡献我的一点信息。

到目前为止，我还找不到解决我的具体问题的方法。至少对于我的用例来说，当表格不是网站上唯一的东西时，表格主体不断滚动到标题上方/后面，并且在标题上方可见，这看起来相当糟糕。

给出下表（上面链接问题中 Roko C. Buljan 的原始代码）：

.tableFixHead          { overflow: auto; height: 100px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }

/* Just common table stuff. Really. */
table  { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th     { background:#eee; }

<div class="tableFixHead">
  <table>
    <thead>
      <tr><th>TH 1</th><th>TH 2</th></tr>
    </thead>
    <tbody>
      <tr><td>A1</td><td>A2</td></tr>
      <tr><td>B1</td><td>B2</td></tr>
      <tr><td>C1</td><td>C2</td></tr>
      <tr><td>D1</td><td>D2</td></tr>
      <tr><td>E1</td><td>E2</td></tr>
    </tbody>
  </table>
</div>

这可能对你来说已经完全正常了，但如果你碰巧遇到和我一样的问题，你想稍微改变它。在

.tableFixHead

中，您要添加

padding-top: o;

。

这样，表格将从您的标题开始，而不是在其上方一点点（=填充）。

取决于您的底层 CSS

border-top

或

margin-top

可能是您的解决方案。如果不是他们中的任何一个，我很高兴得到纠正。

（我是真正为 stackoverflow 做出贡献的新手，所以如果有更好的方法来添加这些信息，我很乐意学习。）

Answer 1

上面的代码片段可能已经完全适合你，但如果你碰巧遇到和我一样的问题，你想稍微改变它。在

.tableFixHead

中，您要添加

padding-top: o;

。

.tableFixHead          { overflow: auto; height: 100px; padding-top: 0; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }

/* Just common table stuff. Really. */
table  { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th     { background:#eee; }

<div class="tableFixHead">
  <table>
    <thead>
      <tr><th>TH 1</th><th>TH 2</th></tr>
    </thead>
    <tbody>
      <tr><td>A1</td><td>A2</td></tr>
      <tr><td>B1</td><td>B2</td></tr>
      <tr><td>C1</td><td>C2</td></tr>
      <tr><td>D1</td><td>D2</td></tr>
      <tr><td>E1</td><td>E2</td></tr>
    </tbody>
  </table>
</div>

在 stackoverflow 上运行此代码可能不会显示任何差异。但根据桌子的位置以及它与其他对象的交互，这可能是您一直在寻找的解决方案。

这样，表格将从您的标题开始，而不是在其上方一点点（=填充）。

取决于您的底层 CSS

border-top

或

margin-top

可能是您的解决方案。如果不是他们中的任何一个，我很高兴得到纠正。

（我是真正为 stackoverflow 做出贡献的新手，所以如果有更好的方法来添加这些信息，我很乐意学习。）