如何使用溢出滚动设置 tbody 高度

Question

我在设置 tbody 高度宽度溢出滚动时遇到问题。

 <style>
     tbody{
       height:50px;display:block;overflow:scroll
     }
   </style>

       <h3>Table B</h3>
    <table style="border: 1px solid red;width:300px;display:block">
        <thead>
            <tr>
                <td>Name</td>
                <td>phone</td>
            </tr>
        </thead>
        <tbody style='height:50px;display:block;overflow:scroll'>
            <tr>
                <td>AAAA</td>
                <td>323232</td>
            </tr>
            <tr>
                <td>BBBBB</td>
                <td>323232</td>
            </tr>
            <tr>
                <td>CCCCC</td>
                <td>3435656</td>
            </tr>
        </tbody>
    </table>

在这里访问我的小提琴

我希望表 B 像表 A 一样带有溢出滚动条。

任何帮助将不胜感激。

非常感谢，M。

原文由 Amit Kumar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果你想 tbody 显示滚动条，设置它的 display: block; 。

为 --- 设置 display: table; tr 以便它保持表的行为。

要均匀分布细胞，请使用 table-layout: fixed; 。

演示

---

CSS：

 table, tr td {
    border: 1px solid red
}
tbody {
    display: block;
    height: 50px;
    overflow: auto;
}
thead, tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;/* even columns width , fix width of table too*/
}
thead {
    width: calc( 100% - 1em )/* scrollbar is average 1em/16px width, remove it from thead width */
}
table {
    width: 400px;
}

---

If tbody doesn’t show a scroll, because content is less than height or max-height , set the scroll any time with: overflow-y: scroll; . 演示 2

---

<editS/updateS> 2019 - 04/2021

---

• 重要说明： 这种使表格可滚动的方法在某些情况下有缺点。 （见下面的评论。） 顺便说一下，这个线程中的一些重复答案值得同样的警告

警告：此解决方案断开了 thead 和 tbody 单元格网格；这意味着在大多数实际情况下，您不会获得表格中期望的单元格对齐方式。请注意，此解决方案使用 hack 来使它们保持对齐：thead { width: calc( 100% - 1em ) }

• 无论如何，要设置滚动条，需要重置显示以摆脱表格布局（永远不会显示滚动条）。

• 通过 display:grid / contents 将 <table> 转换为网格也会在标题和可滚动部分之间留下空白。 （同上，如果是从 div 构建的）

• overflow:overlay; 还没有出现在Firefox中 （继续关注）

• position:sticky 需要一个可以滚动的父容器。确保你的 thead 如果你有几行并且 rowspan/colspan 标题可以是粘性的（它不适用于 chrome）。

到目前为止，还没有完美的解决方案，仅通过 CSS 。有几种平均方式可供选择，因此它适合您自己的表格（表格布局：固定；是..固定表格和列的宽度，但 javascript 可能用于重置这些值 => 退出纯 CSS）

原文由 G-Cyrillus 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

另一种方法是将表格包裹在可滚动元素中，并将标题单元格设置为固定在顶部。

这种方法的优点是您不必更改 tbody 上的显示，您可以将其留给浏览器来计算列宽，同时保持标题单元格宽度与数据单元格列宽一致。

 /* Set a fixed scrollable wrapper */
.tableWrap {
  height: 200px;
  border: 2px solid black;
  overflow: auto;
}
/* Set header to stick to the top of the container. */
thead tr th {
  position: sticky;
  top: 0;
}

/* If we use border,
we must use table-collapse to avoid
a slight movement of the header row */
table {
 border-collapse: collapse;
}

/* Because we must set sticky on th,
 we have to apply background styles here
 rather than on thead */
th {
  padding: 16px;
  padding-left: 15px;
  border-left: 1px dotted rgba(200, 209, 224, 0.6);
  border-bottom: 1px solid #e8e8e8;
  background: #ffc491;
  text-align: left;
  /* With border-collapse, we must use box-shadow or psuedo elements
  for the header borders */
  box-shadow: 0px 0px 0 2px #e8e8e8;
}

/* Basic Demo styling */
table {
  width: 100%;
  font-family: sans-serif;
}
table td {
  padding: 16px;
}
tbody tr {
  border-bottom: 2px solid #e8e8e8;
}
thead {
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
}
tbody tr:hover {
  background: #e6f7ff;
}

 <div class="tableWrap">
  <table>
    <thead>
      <tr>
        <th><span>Month</span></th>
        <th>
          <span>Event</span>
        </th>
        <th><span>Action</span></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>January</td>
        <td>AAA</td>
        <td><span>Invite | Delete</span></td>
      </tr>
      <tr>
        <td>February. An extra long string.</td>
        <td>AAA</td>
        <td><span>Invite | Delete</span></td>
      </tr>
      <tr>
        <td>March</td>
        <td>AAA</td>
        <td><span>Invite | Delete</span></td>
      </tr>
      <tr>
        <td>April</td>
        <td>AAA</td>
        <td><span>Invite | Delete</span></td>
      </tr>
      <tr>
        <td>May</td>
        <td>AAA</td>
        <td><span>Invite | Delete</span></td>
      </tr>
      <tr>
        <td>June</td>
        <td>AAA</td>
        <td><span>Invite | Delete</span></td>
      </tr>
      <tr>
        <td>July</td>
        <td>AAA</td>
        <td><span>Invite | Delete</span></td>
      </tr>
      <tr>
        <td>August</td>
        <td>AAA</td>
        <td><span>Invite | Delete</span></td>
      </tr>
      <tr>
        <td>September</td>
        <td>AAA</td>
        <td><span>Invite | Delete</span></td>
      </tr>
      <tr>
        <td>October</td>
        <td>AAA</td>
        <td><span>Invite | Delete</span></td>
      </tr>
      <tr>
        <td>November</td>
        <td>AAA</td>
        <td><span>Invite | Delete</span></td>
      </tr>
      <tr>
        <td>December</td>
        <td>AAA</td>
        <td><span>Invite | Delete</span></td>
      </tr>
    </tbody>
  </table>
</div>

原文由 brandonkal 发布，翻译遵循 CC BY-SA 4.0 许可协议