不使用固定高度和 overflow-y 的 HTML 表格 float 标题

Question

我看到的所有带有表格和固定标题的示例都使用了 css

tbody {
  height: 120px;
  overflow-y: auto;
}

这会创建双垂直滚动条。一个来自浏览器本身，另一个来自表格。如果一个页面只有一个 width:100% 的表格，那么这个双滚动条就非常丑陋而且没有响应。有没有另一种方法可以在不设置 tbody 高度的情况下执行此操作，以便只有正文行从屏幕上滚动，表格标题行始终可见并且浏览器中只有一个垂直滚动条？

Answer 1

如前所述，使用表格和响应式设计不能齐头并进。我已经尝试了很多插件来解决这个问题，但没有一个能很好地解决这个问题。

但在回答滚动条问题时，您可以使用 position:sticky; 使表头在您垂直滚动表格时留在屏幕上。

我希望我正确理解了这个问题:

header,footer {
  height: 50px;
  width: 100%;
  background: #333;
  color: #fff;
  text-align: center;
}

#spacer {
  height: 500px;
  width: 100%;
  background: #eee;
}

table {
  width: 100%;
  text-align: center;
}
table td {
  border:1px solid #333;
  padding: 30px 0px;
}
table tr:first-child th {
  position:sticky;
  top:0px;
  background: #333;

}
table tr:first-child th {
  color: #fff;
  padding: 20px 0px;
}

<header><h1>Scroll Down</h1></header>
<div id="spacer"></div>
<table>
  <tr>
    <th>Column One</th>
    <th>Column Two</th>
    <th>Column Three</th>
    <th>Column Four</th>
  </tr>
  <tr>
    <td>23124</td>
    <td>23124</td>
    <td>23124</td>
    <td>23124</td>
  </tr>
  <tr>
    <td>23124</td>
    <td>23124</td>
    <td>23124</td>
    <td>23124</td>
  </tr>
  <tr>
    <td>23124</td>
    <td>23124</td>
    <td>23124</td>
    <td>23124</td>
  </tr>
  <tr>
    <td>23124</td>
    <td>23124</td>
    <td>23124</td>
    <td>23124</td>
  </tr>
  <tr>
    <td>23124</td>
    <td>23124</td>
    <td>23124</td>
    <td>23124</td>
  </tr>
  <tr>
    <td>23124</td>
    <td>23124</td>
    <td>23124</td>
    <td>23124</td>
  </tr>
  <tr>
    <td>23124</td>
    <td>23124</td>
    <td>23124</td>
    <td>23124</td>
  </tr>
  <tr>
    <td>23124</td>
    <td>23124</td>
    <td>23124</td>
    <td>23124</td>
  </tr>
</table>

<div id="spacer"></div>
<div id="spacer"></div>
<footer><h1>The End</h1></footer>