我有 2 个子 div，每个子 div 里面都有一个表格。我们可以删除子元素的垂直滚动条吗？只有父级 div 应该有垂直滚动条。添加图像以更好地理解它。如果有很多行，则滚动父 div 以查看数据，并且水平滚动条应始终可见。
如有任何帮助，请采纳 谢谢
table,
th,
td {
border: 1px solid black;
}
.overflow-auto {
overflow-x: auto;
overflow-y: unset;
}
.display-flex {
display: flex
}
td,
th {
white-space: nowrap
}
th {
font-weight: bold;
}
html,
body {
height: 100%;
width: 100%;
}
body {
font-family: sans-serif;
line-height: 1.4;
}<div style="height:50%; background: #f5f5f5" class="display-flex overflow-auto">
<div style="width: 50%" class="overflow-auto child-1">
<table>
<tr>
<th>
<div>First Name</div>
</th>
<th>
<div>Last name</div>
</th>
<th>
<div>State</div>
</th>
<th>
<div>City</div>
</th>
<th>
<div>country</div>
</th>
<th>
<div>Age</div>
</th>
<th>
<div>Date of Birth</div>
</th>
<th>
<div>Mothers Name</div>
</th>
<th>
<div>Fathers Name</div>
</th>
<th>
<div>No. Of Siblings</div>
</th>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr><tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
</table>
</div>
<div style="width: 50%" class="overflow-auto child-2">
<table>
<tr>
<th>
<div>First Name</div>
</th>
<th>
<div>Last name</div>
</th>
<th>
<div>State</div>
</th>
<th>
<div>City</div>
</th>
<th>
<div>country</div>
</th>
<th>
<div>Age</div>
</th>
<th>
<div>Date of Birth</div>
</th>
<th>
<div>Mothers Name</div>
</th>
<th>
<div>Fathers Name</div>
</th>
<th>
<div>No. Of Siblings</div>
</th>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
</table>
</div>
</div>最佳答案
因为在您的标记中使用 javascript 我使用它添加了一些答案
需要设置child div的height以跟随内容，这样child不会有滚动条，但是相反，它会有父级的滚动条(尽管这样做，当您滚动时，您将跟随内容最长的 child 滚动，而另一个 child滚动时将不可见)
这是更新后的代码段，其中添加了 javascript，以使 child 的高度与其 table 内容高度相匹配
document.addEventListener("DOMContentLoaded", function(event) {
var container = document.getElementsByClassName('child');
for (var i = 0; i < container.length; i++) {
container[i].style.height = (container[i].getElementsByTagName('table')[0].clientHeight + 20) + 'px';
}
});table,
th,
td {
border: 1px solid black;
}
.overflow-auto {
overflow-x: auto;
overflow-y: unset;
}
.display-flex {
display: flex
}
td,
th {
white-space: nowrap
}
th {
font-weight: bold;
}
html,
body {
height: 100%;
width: 100%;
}
body {
font-family: sans-serif;
line-height: 1.4;
}<div style="height:50%; background: #f5f5f5" class="display-flex overflow-auto">
<div style="width: 50%" class="overflow-auto child">
<table>
<tr>
<th>
<div>First Name</div>
</th>
<th>
<div>Last name</div>
</th>
<th>
<div>State</div>
</th>
<th>
<div>City</div>
</th>
<th>
<div>country</div>
</th>
<th>
<div>Age</div>
</th>
<th>
<div>Date of Birth</div>
</th>
<th>
<div>Mothers Name</div>
</th>
<th>
<div>Fathers Name</div>
</th>
<th>
<div>No. Of Siblings</div>
</th>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
</table>
</div>
<div style="width: 50%" class="overflow-auto child">
<table>
<tr>
<th>
<div>First Name</div>
</th>
<th>
<div>Last name</div>
</th>
<th>
<div>State</div>
</th>
<th>
<div>City</div>
</th>
<th>
<div>country</div>
</th>
<th>
<div>Age</div>
</th>
<th>
<div>Date of Birth</div>
</th>
<th>
<div>Mothers Name</div>
</th>
<th>
<div>Fathers Name</div>
</th>
<th>
<div>No. Of Siblings</div>
</th>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
</table>
</div>
</div>更新
为了使 child 水平滚动条粘在 parent 的底部，我在 parent 容器后面添加了一些虚拟滚动条，然后进行转换它的垂直位置 -1em (通常是滚动条的宽度/高度)并添加一些 onscroll 事件，如其他问题 How do I synchronize the scroll position of two divs? 中所述。
这是更新后的代码片段，其中更新了虚拟水平滚动条
var child1, dummy1, child2, dummy2;
document.addEventListener("DOMContentLoaded", function(event) {
var highest = 0;
var container = document.getElementsByClassName('child');
for (var i = 0; i < container.length; i++) {
var curHeight = container[i].getElementsByTagName('table')[0].clientHeight + 20;
highest = highest > curHeight ? highest : curHeight;
}
document.getElementById('table-dummy-1').style.width = document.getElementById('table-1').clientWidth + 'px';
document.getElementById('table-dummy-2').style.width = document.getElementById('table-2').clientWidth + 'px';
child1 = document.getElementById('child-1');
dummy1 = document.getElementById('scroller-1');
child2 = document.getElementById('child-2');
dummy2 = document.getElementById('scroller-2');
child1.style.height = child2.style.height = highest + 'px';
dummy1.style.width = child1.clientWidth + 'px';
dummy1.onscroll = function() {
child1.scrollLeft = this.scrollLeft;
}
child1.onscroll = function() {
dummy1.scrollLeft = this.scrollLeft;
}
dummy2.style.width = child2.clientWidth + 'px';
dummy2.onscroll = function() {
child2.scrollLeft = this.scrollLeft;
}
child2.onscroll = function() {
dummy2.scrollLeft = this.scrollLeft;
}
});.parent {
height: 50%;
background: #f5f5f5;
overflow: auto;
display: flex;
position: relative;
}
.child {
overflow-x: auto;
width: 50%;
}
.container-scroller {
transform: translateY(-1em);
}
.child-scroller {
float: left;
overflow-x: auto;
width: 50%;
}
.scroller-right {
right: 1em;
}
.scroller-vertical {
position: absolute;
top: 0;
right: 0;
bottom: 0;
overflow-y: auto;
height: 100%;
}
.table-dummy {
height: 1px;
}
.height-dummy {
width: 1px;
}
table,
th,
td {
border: 1px solid black;
}
td,
th {
white-space: nowrap
}
th {
font-weight: bold;
}
html,
body {
height: 100%;
width: 100%;
}
body {
font-family: sans-serif;
line-height: 1.4;
margin: 0;
}<div class="parent">
<div id="child-1" class="child">
<table id="table-1">
<tr>
<th>
<div>First Name</div>
</th>
<th>
<div>Last name</div>
</th>
<th>
<div>State</div>
</th>
<th>
<div>City</div>
</th>
<th>
<div>country</div>
</th>
<th>
<div>Age</div>
</th>
<th>
<div>Date of Birth</div>
</th>
<th>
<div>Mothers Name</div>
</th>
<th>
<div>Fathers Name</div>
</th>
<th>
<div>No. Of Siblings</div>
</th>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
</table>
</div>
<div id="child-2" class="child">
<table id="table-2">
<tr>
<th>
<div>First Name</div>
</th>
<th>
<div>Last name</div>
</th>
<th>
<div>State</div>
</th>
<th>
<div>City</div>
</th>
<th>
<div>country</div>
</th>
<th>
<div>Age</div>
</th>
<th>
<div>Date of Birth</div>
</th>
<th>
<div>Mothers Name</div>
</th>
<th>
<div>Fathers Name</div>
</th>
<th>
<div>No. Of Siblings</div>
</th>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
</table>
</div>
</div>
<div class="container-scroller">
<div id="scroller-1" class="child-scroller">
<div id="table-dummy-1" class="table-dummy">
</div>
</div>
<div id="scroller-2" class="child-scroller scroller-right">
<div id="table-dummy-2" class="table-dummy">
</div>
</div>
</div>注意:底部的水平滚动条是虚拟的，与真实滚动条的位置几乎相同，您可以尝试删除以下 css 来查看它实际上是 2 个滚动条
.container-scroller {
transform: translateY(-1em);
}
关于javascript - 删除子项的垂直滚动条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66381350/