如何使显示表-行-组的 div 可垂直滚动?

Question

我在 csstable显示属性的帮助下仅使用divs 构建一个表。我需要我的桌子是灵活的，所以我不能使用<table>. 除了 .table-body 之外，一切正常。我将 display 属性设置为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
}

Answer 1

我们需要以下步骤来实现垂直滚动：
1. 将<tbody>设置为display:block，以便我们可以应用高度和溢出属性。
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>

希望这有帮助。