有没有办法在不使用“显示：块”参数的情况下使表格主体可滚动？答案

【问题标题】：Is there any way to make table's body scrollable without using "display: block" parameter?有没有办法在不使用“显示：块”参数的情况下使表格主体可滚动？
【发布时间】：2020-06-17 02:07:26
【问题描述】：

我在显示可滚动表格时遇到问题。我只想滚动没有标题的表格正文。当我设置“显示：块”参数时，它会使表格不对齐，并且看起来不像没有这个参数那么好。但是当我删除“显示：块”时，滚动的可能性就消失了。您知道使表格可滚动的其他方法吗？提前感谢您的帮助！

【问题讨论】：

在使用表格时，您不能触摸任何表格元素的显示属性，现在您想要实现的内容无法使用普通表格完成，您需要将表格包装为一个可滚动的元素overflow:scroll 并使标题成为一个单独的元素，在包装器中具有粘性

标签： html css html-table scroll

【解决方案1】：

您可以改用包装器和position:sticky，这样表格布局算法适用于整个表格，并且每列和每行都保持完美对齐。

sn-p 中的经典用法如下：

.myTableWrapper {
width:min-content;/* wraps onto table's width */
height: 100px;
overflow-y:auto;
padding-right:1.3em;
}
thead {
background:white;
position:sticky;
top:0;
}

<div class="myTableWrapper">
  <table>
    <thead>
      <tr><th>TH</th><th>TH</th><th>TH</th><th>TH</th><th>TH</th></tr></thead>
    <tbody>
      <tr><td>td</td><td>td</td><td>td</td><td>td</td><td>td</td></tr>
      <tr><td>td</td><td>td</td><td>td</td><td>td</td><td>td</td></tr>
      <tr><td>td</td><td>td</td><td>td</td><td>td</td><td>td</td></tr>
      <tr><td>td</td><td>td</td><td>td</td><td>td</td><td>td</td></tr>
      <tr><td>td</td><td>td</td><td>td</td><td>td</td><td>td</td></tr>
      <tr><td>td</td><td>td</td><td>td</td><td>td</td><td>td</td></tr>
      <tr><td>td</td><td>td</td><td>td</td><td>td</td><td>td</td></tr>
      <tr><td>td</td><td>td</td><td>td</td><td>td</td><td>td</td></tr>
      <tr><td>td</td><td>td</td><td>td</td><td>td</td><td>td</td></tr>
      <tr><td>td</td><td>td</td><td>td</td><td>td</td><td>td</td></tr>
      <tr><td>td</td><td>td</td><td>td</td><td>td</td><td>td</td></tr>
      <tr><td>td</td><td>td</td><td>td</td><td>td</td><td>td</td></tr>
      <tr><td>td</td><td>td</td><td>td</td><td>td</td><td>td</td></tr>
      <tr><td>td</td><td>td</td><td>td</td><td>td</td><td>td</td></tr>
    </tbody>
  </table>
</div>

或者您可以使用 display:grid 和 display:contents 来避免包装器和从 table-layou 切换到 grd 模型。

带有粘性标题的可调整大小的实时示例 => https://codepen.io/gc-nomade/pen/abboqbR，但 display:contents 尚未在任何地方都被理解。

【讨论】：