javascript - Control Two HTML Tables With One Scroll Bar - Stack Overflow

admin管理员组

文章数量:1406020

I have two separate tables of hopefully same height side by side. I want to be able to have the two municate with each other so that when I scroll the right table down, the left table will also scroll with it in sync.

As of now, the only way I could think of doing this is by enclosing both of them in a div, but this messes with my sizing settings when I try so. Is there a better way of having the two tables municate and scroll up and down at the same time?

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 included a jsfiddle for my code: ;togetherjs=5vkFrp9DEa

Thank you for your time.

I have two separate tables of hopefully same height side by side. I want to be able to have the two municate with each other so that when I scroll the right table down, the left table will also scroll with it in sync.

As of now, the only way I could think of doing this is by enclosing both of them in a div, but this messes with my sizing settings when I try so. Is there a better way of having the two tables municate and scroll up and down at the same time?

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 included a jsfiddle for my code: https://jsfiddle/Lqzyw4u4/6/#&togetherjs=5vkFrp9DEa

Thank you for your time.

• javascript
• html
• css
• html-table
• scrollbar

Share Improve this question Follow edited May 10, 2018 at 21:44 JMV12 asked May 10, 2018 at 21:21 JMV12JMV12 1,05544 gold badges2828 silver badges5858 bronze badges 5

• Could you add a js fiddle, it will be easier for debugging and giving the answer. – Candy Crunch Commented May 10, 2018 at 21:32
• jsfiddle/Lqzyw4u4/6/#&togetherjs=5vkFrp9DEa – JMV12 Commented May 10, 2018 at 21:41
• 2 Hmm why don't you fix your sizing settings? If you want to do in separate divs, you will have to use javascript on scroll event, if you can do it in single div and fix the sizing settings, you don't need javascript. – Candy Crunch Commented May 10, 2018 at 21:47
• Ok, I will look into that, thank you. I'm really new to HTML so everything is learn as I go at this point. I'm sorry for the dumb question. – JMV12 Commented May 10, 2018 at 21:48
• Something very different, so I understand if this is pletely different from what you want but what about this? One table with the necessary sizing? JSFiddle. I used this tables generator for help. – Jos van Weesel Commented May 10, 2018 at 22:06

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

here's how you can do it with javascript if you need the tables in two separate containers:

https://jsfiddle/Lqzyw4u4/7/

Just using onscroll event, getting the scroll position and setting it to the other container.

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

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

}

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

I found this Question looking for something similar, but I have a piece of code to sync horizontal scrolls using jQuery.

function syncScrolls() {
    let div1 = $('#id_div1');
    let div2 = $("#id_div2");

    div1.scroll(function () {
        div2.scrollTop(div1.scrollTop());
        div2.scrollLeft(div1.scrollLeft());
    });
    div2.scroll(function () {
        div1.scrollTop(div2.scrollTop());
        div1.scrollLeft(div2.scrollLeft());
    });
}

本文标签： javascriptControl Two HTML Tables With One Scroll BarStack Overflow