这个表还需要有粘滞/固定的标题(所以当它们向下滚动时,标题仍然可见),我发现这很复杂,因为宽度和高度似乎需要手动设置.

此外,它需要能够水平滚动,以防有大量的列.我不希望它们都是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>