Javascript 用一个滚动条控制两个HTML表

我有两张分开的桌子，希望并排有同样的高度。我希望这两个表能够相互通信，这样当我向下滚动右表时，左表也会同步滚动

到目前为止，我能想到的唯一方法是将它们都包含在一个div中，但这会在我尝试这样做时扰乱我的大小设置。有没有更好的方法让两个表通信并同时上下滚动

HTML:

我的代码中包含了一个JSFIDLE：

---

谢谢您的时间。

如果您需要两个单独的容器中的表，您可以使用javascript执行以下操作：

只需使用onscroll事件，获取滚动位置并将其设置为另一个容器

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

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

}

你能添加一个js提琴吗？它会更容易调试和给出答案。嗯，你为什么不修改你的尺寸设置？如果您想在单独的分区中执行此操作，则必须在scroll事件中使用javascript，如果您可以在单个分区中执行此操作并修复大小设置，则不需要javascript。好的，我将对此进行研究，谢谢。我对HTML真的很陌生，所以在这一点上，一切都在学习中。我很抱歉问你这个愚蠢的问题。有些非常不同的东西，所以我理解这是否与你想要的完全不同，但是这个呢？一张带有必要尺寸的桌子。我用表格生成器寻求帮助。

/* 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;
}

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

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

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