如何使显示 table-row-group 的 div 可垂直滚动？答案

【问题标题】：How to make a div that displays table-row-group vertically scrollable?如何使显示 table-row-group 的 div 可垂直滚动？
【发布时间】：2020-09-07 04:41:40
【问题描述】：

在 css table 显示属性的帮助下，我正在构建一个仅使用 div 的表格。我需要我的桌子灵活，所以我不能使用<table>。除了 .table-body 之外，一切正常。我将显示属性设置为table-row-group，因此它的行为类似于<tbody>，但我希望它可以滚动。我将它的溢出属性设置为自动，它仍然不起作用。

例如，我有这张桌子：

        <div class="table">
        <div class="table-header">
            <div class="table-row">
                <div class="table-cell">Header 1</div>
                <div class="table-cell">Header 2</div>
                <div class="table-cell">Header 3</div>
            </div>
        </div>

        <div class="table-body">
            <div class="table-row">
                <div class="table-cell">cell 1</div>
                <div class="table-cell">cell 2</div>
                <div class="table-cell">cell 3</div>
            </div>
        </div>
    </div>

这是.table-body 的css。我添加了table-row-group 的显示属性，因此它的行为类似于<tbody>。即使溢出设置为自动，它仍然没有滚动。

    .table-body {
        display: table-row-group; // makes it behave like <tbody>
        height: 100%;
        overflow: auto; // does nothing
    }

【问题讨论】：

横向滚动需要使用固定宽度。
@SifatHaque 谢谢，但我现在不需要水平滚动。我需要垂直滚动。
那么你可以为你的.table-body类使用一个固定的高度而不是100%，你需要使用display: block
我不能做display: block，因为我已经在做display: table-row-group，我不能像我提到的那样做<tbody>。

标签： html css html-table display

【解决方案1】：

为了实现垂直滚动，我们需要以下步骤：
1. 将<tbody>设置为display:block，这样我们就可以应用height和overflow属性了。
2.设置<thead><tr>为display:block。

但是，由于您已经使用 display 属性来设置与表格相关的显示值，我不确定如何将两个显示值应用到 div。

不过，您可以使用稍微不同的方法来实现您所需要的，例如：

.fixed_header{
    width: 400px;
    table-layout: fixed;
    border-collapse: collapse;
}

.fixed_header tbody{
  display:block;
  width: 100%;
  overflow: auto;
  height: 100px;
}

.fixed_header thead tr {
   display: block;
}

.fixed_header thead {
  background: black;
  color:#fff;
}

.fixed_header th, .fixed_header td {
  padding: 5px;
  text-align: left;
  width: 200px;
}

<table class="fixed_header">
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
      <th>Col 4</th>
      <th>Col 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>row 1-0</td>
      <td>row 1-1</td>
      <td>row 1-2</td>
      <td>row 1-3</td>
      <td>row 1-4</td>
    </tr>
    <tr>
      <td>row 2-0</td>
      <td>row 2-1</td>
      <td>row 2-2</td>
      <td>row 2-3</td>
      <td>row 2-4</td>
    </tr>
    <tr>
      <td>row 3-0</td>
      <td>row 3-1</td>
      <td>row 3-2</td>
      <td>row 3-3</td>
      <td>row 3-4</td>
    </tr>
    <tr>
      <td>row 4-0</td>
      <td>row 4-1</td>
      <td>row 4-2</td>
      <td>row 4-3</td>
      <td>row 4-4</td>
    </tr>
    <tr>
      <td>row 5-0</td>
      <td>row 5-1</td>
      <td>row 5-2</td>
      <td>row 5-3</td>
      <td>row 5-4</td>
    </tr>
    <tr>
      <td>row 6-0</td>
      <td>row 6-1</td>
      <td>row 6-2</td>
      <td>row 6-3</td>
      <td>row 6-4</td>
    </tr>
    <tr>
      <td>row 7-0</td>
      <td>row 7-1</td>
      <td>row 7-2</td>
      <td>row 7-3</td>
      <td>row 7-4</td>
    </tr>
  </tbody>
</table>

希望这会有所帮助。

【讨论】：