jquery - 向滚动类型相同的两个表添加垂直滚动 - HTML CSS JQuery

Question

我有下面的表格，我已经尝试了一些 CSS 样式到表格甚至行。我已经将滚动添加到表类本身，但它没有滚动，我在表中只有两条记录，但我想滚动应该有点出现。是否可以在 table 上放一个同时滚动的卷轴？

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>&nbsp;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>&nbsp;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>&nbsp;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;
}

Answer 1

使用 JavaScript，向两个表添加滚动事件监听器，表示将相对表的 scrollTop 设置为与事件目标表的 scrollTop 相同。

它看起来像这样，您将对两个滚动元素执行此操作:

scrollingElement.addEventListener('滚动', function() { otherScrollingElement.scrollTop = this.scrollTop; }

在英语中，每个滚动元素都有指令，“当我的滚动条移动时，其他元素的滚动条应该与我的滚动条匹配。”要对水平滚动执行相同操作，请使用 scrollLeft。