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

时间:2018-06-27 15:00:44

标签: jquery html css

我有下表,我对表甚至行尝试了多种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>&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;
}

2 个答案:

答案 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);
        });`