我有下表，我对表甚至行尝试了多种CSS样式。我已经将滚动添加到表类本身，但是没有滚动，我在表中只有两条记录，但是我可以想象滚动应该出现。桌上是否有可以同时滚动的滚动条？
HTML
<article class="row">
<div id="createMembership" class="formContainer">
<div class="col-sm-12">
<div class="panel">
<div class="panel-heading">
<span class="panel-title">
<i class="glyphicon glyphicon-globe"></i> Select Territories
</span>
</div>
<div class="panel-body">
<div class="row">
<label class="hidden">Territories</label>
<div id="createMembership" class="formContainer">
<div class="col-sm-6">
<div class="panel">
<div class="panel-heading">
<span class="panel-title">
<i class="fa fa-usd"></i> Excluded
</span>
</div>
<div class="panel-body pn">
<fieldset>
<legend style="display: none">Select Contracts Form</legend>
<div class="panel panel-visible mbn" id="tableContainer">
<table class="table table-striped table-hover dataTable catalogueContractsTable admin-form theme-primary" cellspacing="0" width="100%" role="grid">
<thead id="tableHeader">
<tr>
<th class="bg-white">Name</th>
<th class="bg-white">Contract Type</th>
<th class="hidden-xs bg-white">Start Date</th>
<th class="hidden-xs bg-white">End Date</th>
<th class="hidden-xs bg-white text-center">Action</th>
</tr>
</thead>
<tbody>
<tr class=''>
<td>Automation Contract 2</td>
<td>Sub-Publishing</td>
<td class="hidden-xs">2018/05/14</td>
<td class="hidden-xs"></td>
<td class="updateTableRow text-center">
<input type="button" class="btn btn-success btn br2 btn-xs fs12 table-btn" id="AddContractBtn" value="Add" />
</td>
</tr>
<tr class=''>
<td>Automation Contract 1</td>
<td>Publishing</td>
<td class="hidden-xs">2018/05/14</td>
<td class="hidden-xs"></td>
<td class="updateTableRow text-center">
<input type="button" class="btn btn-success btn br2 btn-xs fs12 table-btn" id="AddContractBtn" value="Add" />
</td>
</tr>
</tbody>
</table>
</div>
</fieldset>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="panel">
<div class="panel-heading">
<span class="panel-title">
<i class="fa fa-usd"></i> Include
</span>
</div>
<div class="panel-body pn">
<fieldset>
<legend style="display: none">Select Contracts Form</legend>
<div class="panel panel-visible mbn" id="tableContainer">
<table class="table table-striped table-hover dataTable catalogueContractsTable admin-form theme-primary" cellspacing="0" width="100%" role="grid">
<thead id="tableHeader">
<tr>
<th class="bg-white">Name</th>
<th class="bg-white">Contract Type</th>
<th class="hidden-xs bg-white">Start Date</th>
<th class="hidden-xs bg-white">End Date</th>
<th class="hidden-xs bg-white text-center">Action</th>
</tr>
</thead>
<tbody>
<tr class=''>
<td>Automation Contract 2</td>
<td>Sub-Publishing</td>
<td class="hidden-xs">2018/05/14</td>
<td class="hidden-xs"></td>
<td class="updateTableRow text-center">
<input type="button" class="btn btn-success btn br2 btn-xs fs12 table-btn" id="AddContractBtn" value="Add" />
</td>
</tr>
<tr class=''>
<td>Automation Contract 1</td>
<td>Publishing</td>
<td class="hidden-xs">2018/05/14</td>
<td class="hidden-xs"></td>
<td class="updateTableRow text-center">
<input type="button" class="btn btn-success btn br2 btn-xs fs12 table-btn" id="AddContractBtn" value="Add" />
</td>
</tr>
</tbody>
</table>
</div>
</fieldset>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="text-center">
<input type="button" class="btn btn-primary" id="CancelForm" value="Cancel" />
<input type="submit" class="btn btn-primary" id="SubmitForm" value="Create" />
</div>
</div>
</div>
</article>
CSS
#tableContainer table.catalogueContractsTable thead tr th:nth-child(1){
width: 30%;
text-align: left;
}
#tableContainer table.catalogueContractsTable thead tr th:nth-child(2) {
width: 20%;
text-align: left;
}
#tableContainer table.catalogueContractsTable thead tr th:nth-child(3) {
width: 15%;
text-align: left;
}
#tableContainer table.catalogueContractsTable thead tr th:nth-child(4) {
width: 15%;
text-align: left;
}
#tableContainer table.catalogueContractsTable thead tr th:nth-child(5) {
width: 15%;
text-align: left;
}
答案 0 :(得分：1)
使用JavaScript，向两个表中添加滚动事件侦听器，以将相对表的scrollTop设置为与事件目标表的scrollTop相同。
它将看起来像这样，您将对两个滚动元素都这样做：
scrollingElement.addEventListener('scroll', function() {
otherScrollingElement.scrollTop = this.scrollTop;
}
用英语，每个滚动元素都有相应的说明：“当我的滚动条移动时，另一个元素的滚动条应与我的滚动条匹配。”要对水平滚动执行相同操作，请使用scrollLeft。
答案 1 :(得分：0)
设法解决了这个问题。
HTML
我将表格包装在ID <div id="include-table-scroller">
然后我在CSS中添加了
`#table-scroller {
max-height: 221px;
overflow: auto;
}
#include-table-scroller {
max-height: 221px;
overflow: auto;
}`
然后我写了一些JQuery
`var scrollerTimeout;
$(' #table-scroller, #include-table-scroller').on("scroll", function callback() {
clearTimeout(scrollerTimeout);
var source = $(this),
target = $(source.is("#table-scroller") ? '#include-table-scroller' : '#include-table-scroller');
target.off("scroll").scrollTop(source.scrollTop());
scrollerTimeout = setTimeout(function () {
target.on("scroll", callback);
}, 100);
});`