表格 tbody 与可滚动 HTML 表格上的 thead 合并-解网

问：

在混合网页上，一个部分包含一个可滚动的名称表，其中包含有关它们的一些信息。理想情况下，此表将具有固定标题，下面有可滚动的行。但我似乎无法让它正常工作。

这里明显的问题是（至少在 Chrome 最新版本上）行数据与标题合并（不会覆盖），因此两个值占据相同的空间，使任何一个值都难以阅读。另一个问题是标题在滚动表格时移动（仅移动几个像素，但它们确实移动）。虽然我们可以忍受后者，但它似乎不专业且不理想。

我试过在适当的位置插入 thead ... /thead tbody ... /tbody 标签...结果是列的对齐方式在标题和正文之间不再匹配。

我找到了三十个！！这个问题的答案。如果我从第个属性中删除 top：0 规范，标题会随着正文滚动。与position：sticky相同。

如果我从 tbody 中删除“overflow：auto”，正如上面的帖子中所建议的那样，我将失去滚动的能力，并且表格会超出所需的窗口。

那篇文章中的一些“工作解决方案”包括 JavaScript，如果可能的话，我们更愿意避免这种复杂性。其他人并没有真正描述他们在做什么，所以很难理解。

我做错了什么，导致这张桌子以这种方式行事？

.fixed_header_watchers tbody {
  display: block;
  overflow: auto;
  height: 300px;
  width: 100%;
}

.fixed_header_watchers th {
  top: 0;
  position: sticky;
  padding: 0 0px;
  border-collapse: collapse;
  font-size: 100%;
  border: none;
  white-space: nowrap;
  padding-left: 5px;
}

* {
  padding: 0;
  margin: 0;
}

<div id='watchers'>
  <table class='fixed_header_watchers'>
    <tr>
      <th colspan=2>Watcher</th>
      <th>Joined</th>
      <th>Latest</th>
    </tr>
    <tr>
      <td style='text-align:right;'>40</td>
      <td>Wrestler<br>@wrestler</td>
      <td>08:18</td>
      <td style='text-align:right;'>0.3m</td>
    </tr>
    <tr>
      <td style='text-align:right;'>39</td>
      <td>Allen Evans - AME Arts</td>
      <td>08:16</td>
      <td style='text-align:right;'>0.0m</td>
    </tr>
    <tr>
      <td style='text-align:right;'>38</td>
      <td>Ct Pirate<br>@Missing</td>
      <td>08:13</td>
      <td style='text-align:right;'>0.0m</td>
    </tr>
    <tr>
      <td style='text-align:right;'>37</td>
      <td>Will</td>
      <td>08:12</td>
      <td style='text-align:right;'>0.0m</td>
    </tr>
    <tr>
      <td style='text-align:right;'>36</td>
      <td>Derth Of 13<br>Sep 11 22, 56.0 weeks</td>
      <td>08:11</td>
      <td style='text-align:right;'>5.9m</td>
    </tr>
    <tr>
      <td style='text-align:right;'>35</td>
      <td>Joy Robbins<br>@joyorobbins6838</td>
      <td>08:11</td>
      <td style='text-align:right;'>6.7m</td>
    </tr>
    <tr>
      <td style='text-align:right;'>34</td>
      <td>Spanky<br>@spanky</td>
      <td>08:07</td>
      <td style='text-align:right;'>11.2m</td>
    </tr>
    <tr>
      <td style='text-align:right;'>33</td>
      <td>Bob Crawford Art<br>Sep 24 23, 2.0 weeks</td>
      <td>08:04</td>
      <td style='text-align:right;'>0.0m</td>
    </tr>
    <tr>
      <td style='text-align:right;'>32</td>
      <td>(Barkley)107 Drifters</td>
      <td>08:03</td>
      <td style='text-align:right;'>0.0m</td>
    </tr>
  </table>

html css html-table 滚动覆盖

然后我开始在网格中定义网格，这样我们就可以自定义事物并调整它们的大小。请注意，我如何为标题和正文提供相同的列宽，但将第一个标题放在前两列中。带有名称，主要只是为了使用清楚;该定义也可以合并到一个 CSS 块中。grid-template-columns: 2em 20ch 8ch 6ch;first

我为这个例子任意分配了 a。tbodyheight: 10em;

其中很大一部分只是一些尺寸，例如车身排高之类的。3em

旁注：不喜欢，这两个文本段可能在跨度中，以便使用一组更灵活的 CSS 进行样式工作 - 例如，根据视图大小等为它们提供不同的布局。<br>

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-size: 16px;
}

body,
#watchers {
  display: grid;
  place-items: center;
}

.fixed_header_watchers {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 3em auto;
  grid-template-areas: "head" "body";
  align-items: center;
  border: 1px red solid;
}

.fixed_header_watchers thead {
  grid-area: head;
  position: sticky;
  top: 0;
}

.fixed_header_watchers tbody {
  grid-area: body;
  overflow: auto;
  height: 10em;
}

.fixed_header_watchers thead,
.fixed_header_watchers tbody {
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto;
  align-items: center;
  border: 1px blue solid;
  margin: 0.25em;
}

.fixed_header_watchers thead .header-row {
  display: grid;
  grid-template-columns: 2em 20ch 8ch 6ch;
  grid-template-rows: 1fr;
  grid-template-areas: "first first second third";
  border: solid green 1px;
}

.fixed_header_watchers thead .header-row th:first-of-type {
  grid-area: first;
}

.fixed_header_watchers thead .header-row th {
  border: solid #00ff00A0 2px;
}

.fixed_header_watchers tbody tr {
  display: grid;
  grid-template-columns: 2em 20ch 8ch 6ch;
  grid-template-rows: 3em;
  align-items: center;
  border: solid orange 1px;
  margin: 0.25em;
}

.fixed_header_watchers tbody tr td {
  border: solid purple 1px;
  text-align: center;
}

.fixed_header_watchers * tr *.right-me {
  text-align: right;
}

<div id='watchers'>
  <table class='fixed_header_watchers'>
    <thead>
      <tr class="header-row">
        <th>Watcher</th>
        <th>Joined</th>
        <th>Latest</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="right-me">40</td>
        <td>Wrestler<br>@wrestler</td>
        <td>08:18</td>
        <td class="right-me">0.3m</td>
      </tr>
      <tr>
        <td class="right-me">39</td>
        <td>Allen Evans - AME Arts</td>
        <td>08:16</td>
        <td class="right-me">0.0m</td>
      </tr>
      <tr>
        <td class="right-me">38</td>
        <td>Ct Pirate<br>@Missing</td>
        <td>08:13</td>
        <td class="right-me">0.0m</td>
      </tr>
      <tr>
        <td class="right-me">37</td>
        <td>Will</td>
        <td>08:12</td>
        <td class="right-me">0.0m</td>
      </tr>
      <tr>
        <td class="right-me">36</td>
        <td>Derth Of 13<br>Sep 11 22, 56.0 weeks</td>
        <td>08:11</td>
        <td class="right-me">5.9m</td>
      </tr>
      <tr>
        <td class="right-me">35</td>
        <td>Joy Robbins<br>@joyorobbins6838</td>
        <td>08:11</td>
        <td class="right-me">6.7m</td>
      </tr>
      <tr>
        <td class="right-me">34</td>
        <td>Spanky<br>@spanky</td>
        <td>08:07</td>
        <td class="right-me">11.2m</td>
      </tr>
      <tr>
        <td class="right-me">33</td>
        <td>Bob Crawford Art<br>Sep 24 23, 2.0 weeks</td>
        <td>08:04</td>
        <td class="right-me">0.0m</td>
      </tr>
      <tr>
        <td class="right-me">32</td>
        <td>(Barkley)107 Drifters</td>
        <td>08:03</td>
        <td class="right-me">0.0m</td>
      </tr>
    </tbody>
  </table>
</div>

上一个：覆盖初始自动映射

下一个：WriteAllLines 是删除现有文件并重新创建它，还是覆盖其中的数据？

表格 tbody 与可滚动 HTML 表格上的 thead 合并

Table tbody merges with thead on scrollable HTML table

评论