javascript - 具有粘性/固定标题的水平和垂直响应表？

Question

在我正在构建的网站的页面上，只会显示一个表格。无论屏幕的宽度/高度如何，我都希望该表格贴在屏幕的边缘。

此表还需要有粘性/固定标题(因此当它们向下滚动时，标题仍然可见)，我发现这使事情变得复杂，因为宽度和高度似乎需要手动设置。

此外，它需要能够水平滚动，以防出现大量列。我不希望它们都是 10px 宽，但随着尺寸的变化，表格本身仍然需要贴在屏幕的边缘。

它可以在用户滚动时保持标题粘性，但元素的宽度和高度必须全部手动设置，这意味着它没有任何响应。

这可能吗？我不反对 JavaScript，但我更喜欢纯 CSS 解决方案。

( JSFiddle )

body {
  margin: 0;
  padding: 0;
}
table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 375px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  -webkit-border-horizontal-spacing: 0;
}
th,
td {
  text-align: left;
  padding: 10px 10px;
  width: 105px;
  word-wrap: break-word;
  word-break: break-all;
  -webkit-hyphens: auto;
  hyphens: auto;
}
thead {
  background-color: black;
  color: #fff;
}
thead tr {
  display: block;
  position: relative;
}
tbody {
  display: block;
  overflow: auto;
  height: 300px;
}

<table>
  <thead>
    <tr>
      <th>Longer title for testing</th>
      <th>Color</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apple ioeras eionars ienraist eioarn stio enar sotinera oietnar i i i i i i i i i i i i i i i i i i i i i to</td>
      <td>Red aeinrs tienras tienr eiostnnearhstniehrastneihrsaetinh iaroes nte narse itnar einaer ns eanr enrsena ernes netnea rnst sr</td>
      <td>These are red.</td>
    </tr>
    <tr>
      <td>Pear</td>
      <td>Green</td>
      <td>These are green.</td>
    </tr>
    <tr>
      <td>Grape</td>
      <td>Purple / Green</td>
      <td>These are purple and green.</td>
    </tr>
    <tr>
      <td>Orange</td>
      <td>Orange</td>
      <td>These are orange.</td>
    </tr>
    <tr>
      <td>Banana</td>
      <td>Yellow</td>
      <td>These are yellow.</td>
    </tr>
    <tr>
      <td>Kiwi</td>
      <td>Green</td>
      <td>These are green.</td>
    </tr>
    <tr>
      <td>Plum</td>
      <td>Purple</td>
      <td>These are Purple</td>
    </tr>
    <tr>
      <td>Watermelon</td>
      <td>Red</td>
      <td>These are red.</td>
    </tr>
    <tr>
      <td>Tomato</td>
      <td>Red</td>
      <td>These are red.</td>
    </tr>
    <tr>
      <td>Cherry</td>
      <td>Red</td>
      <td>These are red.</td>
    </tr>
    <tr>
      <td>Cantelope</td>
      <td>Orange</td>
      <td>These are orange inside.</td>
    </tr>
    <tr>
      <td>Honeydew</td>
      <td>Green</td>
      <td>These are green inside.</td>
    </tr>
    <tr>
      <td>Papaya</td>
      <td>Green</td>
      <td>These are green.</td>
    </tr>
    <tr>
      <td>Raspberry</td>
      <td>Red</td>
      <td>These are red.</td>
    </tr>
    <tr>
      <td>Blueberry</td>
      <td>Blue</td>
      <td>These are blue.</td>
    </tr>
    <tr>
      <td>Mango</td>
      <td>Orange</td>
      <td>These are orange.</td>
    </tr>
    <tr>
      <td>Passion Fruit</td>
      <td>Green</td>
      <td>These are green.</td>
    </tr>
  </tbody>
</table>

Answer 1

如果 body 高度和宽度设置为 100%，它将允许 child (表格)占据整个页面。

body{
    height: 100%;
    width: 100%;
}

table{
    height: 100%;
    width: 100%;
}