HTML表浮动标题，不使用固定高度和溢出-y

Question

我用表和固定标题看到的所有例子都是使用css

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

这会创建双垂直滚动条。一个来自浏览器本身，另一个来自表。如果一个页面只有一个宽度表：100％，这个双滚动条非常难看，没有响应。是否有另一种方法可以在不设置tbody高度的情况下执行此操作，以便仅在屏幕上滚动主体行，表头标题行始终可见，浏览器中只有一个垂直滚动条？

Answer 1

正如已经提到的，使用表格和响应式设计并不是齐头并进的。我已经尝试了许多插件来解决这个问题，但没有一个真的很好。

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

我希望我能正确理解这个问题：

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;