如何在滚动上使子列跟随父行

Question

我使用的是bootstrap-table插件中的一个表，该插件使用自定义API填充数据。根据返回的数据，表可能会变得很长。我有几个列表组位于表旁边，它们将根据用户与表的交互保存来自表的某些信息。如果填充表的数据导致用户必须向下滚动才能查看其余数据，我希望列表组跟随滚动。

这是HTML。我想要的列与'followScroll'的类，如果用户必须向下滚动遵循表。它们都嵌套在一行中，列表组嵌套在第一个列表组列中，这样它们就可以堆叠在一起。我尝试使用位置:固定在"followScroll"类，但这只是使列表组消失。任何关于如何实现这一点的建议是非常感激的!

<div class="row tableData mb-3">
<div class="col-md-8">
<table id="table2" class="table table-bordered border-secondary">
<thead>
<tr>
<th data-field="state" data-checkbox="true">Copy</th>
<th data-field="date">Date</th>
<th data-field="temperature">Temperature</th>
<th data-field="hdd">HDD</th>
<th data-field="meterReading">Meter Reading</th>
<th data-field="expected">Expected</th>
<th data-field="replacement">Replacement</th>
<th data-field="reason">Reason</th>
<th data-field="notes">Notes</th>
</thead>
</table>
</div>
<div class="col-md-4 followScroll">
<ol class="list-group list-group-numbered">
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Subheading</div>
Cras justo odio
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Subheading</div>
Cras justo odio
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Subheading</div>
Cras justo odio
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
</ol>
<div class="row mt-3">
<div class="col-md-12">
<ol class="list-group list-group-numbered">
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Subheading</div>
Cras justo odio
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Subheading</div>
Cras justo odio
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Subheading</div>
Cras justo odio
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
</ol>
</div>
<div class="col-md-12 mt-3">
<ol class="list-group list-group-numbered">
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Subheading</div>
Cras justo odio
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Subheading</div>
Cras justo odio
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Subheading</div>
Cras justo odio
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
</ol>
</div>
</div>
</div>
</div>

Answer 1

可以在CSS文件中添加一个overflow属性。css:

.followScroll {
overflow-y: scroll;
overflow-x:scroll;
}

取决于你是想左右滚动(overflow-x:scroll;)还是上下滚动(overflow-y:scroll)