固定标题表出现水平滚动问题答案

【问题标题】：The fixed header tables are getting issue with horizontal scrolling固定标题表出现水平滚动问题
【发布时间】：2019-08-09 12:56:08
【问题描述】：

我正在尝试使用固定标题表创建一个演示。第一个表格水平滚动工作正常，但我遇到了第二个表格水平滚动条的问题。当我滚动第二个表格的水平滚动条时，垂直滚动条区域不固定。我正在分享我的代码。

表格演示：

// JS
$('#maintalbe .pane-hScroll').scroll(function() {
  $('.pane-vScroll').width($('.pane-hScroll').width() + $('.pane-hScroll').scrollLeft());
});

* {
  box-sizing: border-box;
}
body {
  font: 14px/1 Arial, sans-serif;
}
table {
  border-collapse: collapse;
  background: white;
  table-layout: fixed;
  width: 100%;
}
th, td {
  padding: 8px 16px;
  border: 1px solid #ddd;
  width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pane {
  background: #eee;
}
.pane-hScroll {
  overflow: auto;
  width: 400px;
  background: green;
}
.pane-vScroll {
  overflow-y: auto;
  overflow-x: hidden;
  height: 200px;
  background: red;
}

.pane--table2 {
  width: 400px;
  overflow-x: scroll;
}
.pane--table2 th, .pane--table2 td {
  width: auto;
  min-width: 160px;
}
.pane--table2 tbody {
  overflow-y: scroll;
  overflow-x: hidden;
  display: block;
  height: 200px;
}
.pane--table2 thead {
    display: table-row;
}
.mt-4 {
  margin-top: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<h3>Example 1: Two-Table Structure</h3>
<div id="maintalbe" class="pane pane--table1">
  <div class="pane-hScroll">

    <table>
      <thead>
        <th>foo</th><th>foo</th><th>foo</th><th>foo</th>
      </thead>
    </table>

    <div class="pane-vScroll">
      <table>
        <tbody>
          <tr><td>1</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>2</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>3</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>4</td><td>foo foo foo foo foo foo foo foo foo foo foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>5</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>6</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>7</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>8</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>9</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>10</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>11</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>12</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>13</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>14</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>15</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>16</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>17</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>18</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>19</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>20</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>21</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>22</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>23</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>24</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>25</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>26</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>27</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>28</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>28</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>29</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>30</td><td>foo</td><td>foo</td><td>foo</td></tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<h3 class="mt-4">Example 2: Two-Table Structure</h3>
<div class="pane pane--table1">
  <div class="pane-hScroll">

    <table>
      <thead>
        <th>foo</th><th>foo</th><th>foo</th><th>foo</th>
      </thead>
    </table>

    <div class="pane-vScroll">
      <table>
        <tbody>
          <tr><td>1</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>2</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>3</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>4</td><td>foo foo foo foo foo foo foo foo foo foo foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>5</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>6</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>7</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>8</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>9</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>10</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>11</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>12</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>13</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>14</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>15</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>16</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>17</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>18</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>19</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>20</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>21</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>22</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>23</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>24</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>25</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>26</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>27</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>28</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>28</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>29</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>30</td><td>foo</td><td>foo</td><td>foo</td></tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

问题在于，在scroll 事件处理程序中，您选择所有 .pane-vScroll 和.pane-hScroll 元素，而不仅仅是与正在滚动的当前表格相关的元素。

要解决此问题，请使用 this 关键字来引用引发滚动事件的元素，然后从中遍历 DOM 以查找相关元素并仅设置它们的属性。试试这个：

$('.pane .pane-hScroll').scroll(function() {
  var vScrollWidth = $(this).width() + $(this).scrollLeft();
  $(this).find('.pane-vScroll').width(vScrollWidth);
});

完整示例：

$('.pane .pane-hScroll').scroll(function() {
  var vScrollWidth = $(this).width() + $(this).scrollLeft();
  $(this).find('.pane-vScroll').width(vScrollWidth);
});

* {
  box-sizing: border-box;
}

body {
  font: 14px/1 Arial, sans-serif;
}

table {
  border-collapse: collapse;
  background: white;
  table-layout: fixed;
  width: 100%;
}

th,
td {
  padding: 8px 16px;
  border: 1px solid #ddd;
  width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pane {
  background: #eee;
}

.pane-hScroll {
  overflow: auto;
  width: 400px;
  background: green;
}

.pane-vScroll {
  overflow-y: auto;
  overflow-x: hidden;
  height: 200px;
  background: red;
}

.pane--table2 {
  width: 400px;
  overflow-x: scroll;
}

.pane--table2 th,
.pane--table2 td {
  width: auto;
  min-width: 160px;
}

.pane--table2 tbody {
  overflow-y: scroll;
  overflow-x: hidden;
  display: block;
  height: 200px;
}

.pane--table2 thead {
  display: table-row;
}

.mt-4 {
  margin-top: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<h3>Example 1: Two-Table Structure</h3>
<div class="pane pane--table1">
  <div class="pane-hScroll">
    <table>
      <thead>
        <th>foo</th>
        <th>foo</th>
        <th>foo</th>
        <th>foo</th>
      </thead>
    </table>
    <div class="pane-vScroll">
      <table>
        <tbody>
          <tr>
            <td>1</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>2</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>3</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>4</td>
            <td>foo foo foo foo foo foo foo foo foo foo foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>5</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>6</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>7</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>8</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>9</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>10</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>11</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>12</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>13</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>14</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>15</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>16</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>17</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>18</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>19</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>20</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>21</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>22</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>23</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>24</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>25</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>26</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>27</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>28</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>28</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>29</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>30</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<h3 class="mt-4">Example 2: Two-Table Structure</h3>
<div class="pane pane--table1">
  <div class="pane-hScroll">
    <table>
      <thead>
        <th>foo</th>
        <th>foo</th>
        <th>foo</th>
        <th>foo</th>
      </thead>
    </table>
    <div class="pane-vScroll">
      <table>
        <tbody>
          <tr>
            <td>1</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>2</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>3</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>4</td>
            <td>foo foo foo foo foo foo foo foo foo foo foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>5</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>6</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>7</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>8</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>9</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>10</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>11</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>12</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>13</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>14</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>15</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>16</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>17</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>18</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>19</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>20</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>21</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>22</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>23</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>24</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>25</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>26</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>27</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>28</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>28</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>29</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
          <tr>
            <td>30</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

【讨论】：