Question

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

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

此外，它需要能够水平滚动，以防有大量的列。我并不希望它们都是10px宽，但是当尺寸发生变化时，桌子本身仍然需要贴在屏幕的边缘。

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

这有可能吗？我不反对JavaScript，但纯粹的CSS解决方案会稍微偏爱。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

如果身高和宽度设置为100％，它将允许孩子（桌子）占据整个页面。

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

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

Answer 2

这是你在找什么？

https://jsfiddle.net/6o1gbq6x/

<style>
body {
  margin: 0;
  padding: 0;
}
.table_container { /*responsive container*/
  width: 100%;
  margin: 0 auto;
  height: 100%;
  max-height: 300px;
}

table {
  border-collapse: collapse;
  width: auto;
  -webkit-overflow-scrolling: touch;
  -webkit-border-horizontal-spacing: 0;
}
th,
td {
  text-align: left;
  padding: 10px 10px;
  width: 33%;
  min-width: 100px;
  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;
}
</style>

<div class="table_container">
<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>
</div>

如果没有，请告诉我，我会调整。

Answer 3

您可以在thead标记中使用position：fixed（在css中）将表头固定在顶部并且对于全宽设置宽度：100％

水平和垂直响应表，带粘性/固定标头？

3 个答案: