Управление двумя HTML-таблицами с помощью одной полосы прокрутки

Question

У меня есть две отдельные таблицы, надеюсь, одинаковой высоты бок о бок.Я хочу, чтобы они могли общаться друг с другом, чтобы при прокрутке правой таблицы вниз левая таблица также синхронизировалась с ней.

На данный момент, единственный способ, которым я мог думать об этом, это заключить их обоих в элемент div, но это мешает моим настройкам размеров, когда я пытаюсь это сделать.Есть ли лучший способ, чтобы две таблицы взаимодействовали и прокручивали вверх и вниз одновременно?

HTML:

<!-- Scrollable y-axis line of days above the scheduler -->
  <div id="table-wrapper-days">
    <div id="table-scroll-days">
      <table id="dayRow" class="tableDays">
        <tr>
          <td>Monday 5/7</td>
          <td>Tuesday 5/8</td>
          <td>Wednesday 5/9</td>
          <td>Thursday 5/10</td>
          <td>Friday 5/11</td>
          <td>Saturday 5/12</td>
          <td>Sunday 5/13</td>
          <td>Monday 5/14</td>
          <td>Tuesday 5/15</td>
          <td>Wednesday 5/16</td>
          <td>Thursday 5/17</td>
          <td>Friday 5/18</td>
          <td>Saturday 5/19</td>
          <td>Sunday 5/20</td>
          <td>Monday 5/21</td>
          <td>Tuesday 5/22</td>
          <td>Wednesday 5/23</td>
          <td>Thursday 5/24</td>
          <td>Friday 5/25</td>
          <td>Saturday 5/26</td>
          <td>Sunday 5/27</td>
          <td>Monday 5/28</td>
          <td>Tuesday 5/29</td>
          <td>Wednesday 5/30</td>
          <td>Thursday 5/31</td>
          <td>Friday 6/1</td>
          <td>Saturday 6/2</td>
          <td>Sunday 6/3</td>
        </tr>
      </table>
    </div>
  </div>

  <!-- Scrollable x-axis column of employees to the left of the scheduler -->
  <div id="table-wrapper-employees">
    <div id="table-scroll-employees">
      <table id="employeeCol" class="tableEmployees">
        <tr><td>Employee A</td></tr>
        <tr><td>Employee B</td></tr>
        <tr><td>Employee C</td></tr>
        <tr><td>Employee D</td></tr>
        <tr><td>Employee E</td></tr>
        <tr><td>Employee F</td></tr>
        <tr><td>Employee G</td></tr>
        <tr><td>Employee H</td></tr>
        <tr><td>Employee I</td></tr>
        <tr><td>Employee J</td></tr>
        <tr><td>Employee K</td></tr>
        <tr><td>Employee L</td></tr>
        <tr><td>Employee M</td></tr>
        <tr><td>Employee N</td></tr>
        <tr><td>Employee O</td></tr>
        <tr><td>Employee P</td></tr>
        <tr><td>Employee Q</td></tr>
        <tr><td>Employee R</td></tr>
        <tr><td>Employee S</td></tr>
        <tr><td>Employee T</td></tr>
        <tr><td>Employee U</td></tr>
        <tr><td>Employee V</td></tr>
        <tr><td>Employee W</td></tr>
        <tr><td>Employee X</td></tr>
        <tr><td>Employee Y</td></tr>
        <tr><td>Employee Z</td></tr>
    </table>
  </div>
</div>

<div id="table-wrapper-tasks">
  <div id="table-scroll-tasks">
    <script>
      var rows = document.getElementById('dayRow').getElementsByTagName("td").length;
      var cols = document.getElementById('employeeCol').getElementsByTagName("tr").length;
      var rowT = null;

      var drawTable = '<table class="tableTasks">';
        for (let i = 0; i < rows; i++) {
          drawTable += '<tr>';
          for(let j = 0; j < cols; j++) {
            drawTable += '<td></td>';
          }
          drawTable += '</tr>';
        }
        drawTable += '</table>';

        document.write(drawTable);
      </script>
    </div>
  </div>

CSS:

/* To control the style of the overall table class */
table {
  border: 1px solid black;
  text-align: center;
  table-layout: fixed;
}

th, td {
  border: 1px solid black;
  width: 140px;
  height: 35px;
}

/* Settings for Days row */
.tableDays {
  width: 140px;
}

/* Settings for Employee column */
.tableEmployees {
  line-height: 35px;
}

/* Settings for Tasks table */
.tableTasks {
  width:100%;
  margin-top:5px;
  empty-cells: show;
  height:1000px;
  line-height: 35px;
  width: 100px;
}

.empTaskCont {
  height: 500px;
  width: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  position: relative;
  padding-bottom: 30px;
}

#table-wrapper-days {
  position: relative;
  width:1064px;
  margin-left: 252px
}

#table-scroll-days {
  height: auto;
  overflow-x: scroll;
}

#table-wrapper-employees {
  position: relative;
  float:left;
  width:18%;
  margin-top:8px;
}

#table-scroll-employees {
  width: auto;
  overflow-y: scroll;
  max-height: 500px;
}

#table-wrapper-tasks {
  position: relative;
  width:81%;
  float:right;
}

#table-scroll-tasks {
  overflow-x: scroll;
  overflow-y: scroll;
  max-height: 522px;
}

.employee-mod-btn{
  float:left;
}

Iвключил jsfiddle для моего кода: https://jsfiddle.net/Lqzyw4u4/6/#&togetherjs=5vkFrp9DEa

Спасибо за ваше время.

Answer 1

вот как вы можете сделать это с помощью JavaScript, если вам нужны таблицы в двух отдельных контейнерах:

https://jsfiddle.net/Lqzyw4u4/7/

Просто с помощью события onscroll, получения позиции прокрутки и установки ее в другом контейнере.

  function scrollPos(){
    var rightScrollPos = document.getElementById("table-scroll-tasks").scrollTop;

    document.getElementById("table-scroll-employees").scrollTop = rightScrollPos; 

}

  <div id="table-scroll-tasks" onscroll="scrollPos();">