Javascript 如何创建具有固定左右列和水平滚动的表？

我正在尝试创建一个调度系统，但在网格方面遇到了问题。我想要一个

表格

，它的左右

th

单元格固定在适当的位置，但能够在主体

td

单元格中水平滚动。每个

tr

的body

td

单元格数是动态的，并且随着时间段内约会次数的增加或减少而减少或增加。我环顾四周，在这里发现了类似的问题，但它们只要求固定左列，因为我需要这两个列。我试着调整我在答案中看到的内容，但不起作用

---

我目前的原型，在这里：；失败得很严重，所以我想我应该寻求帮助。值得一提的是，我只把Chrome作为浏览器的目标。

也许下面的链接可以帮助您

---

我认为这在CSS中是不可能的，但它不需要太多的JavaScript

将TH元素从

位置：绝对

更改为

位置：相对

。这将解决包装高度的问题，因此您可以删除

overflow-y:visible

。它还解决了TH元素高度的问题

您还可以删除：

• 位置：相对来自包装器

• 左边距：表中的55px

• 左：0来自th：第一个孩子

• 右：0来自th:最后一个子项

普通JavaScript解决方案：

var wrapper = document.querySelector('.wrapper');

function scrollTable() {
  var thl = document.querySelectorAll('.wrapper th:nth-child(1)'),
      thr = document.querySelectorAll('.wrapper th:nth-last-child(1)');

  for(var i = 0; i < thl.length; i++) {
    thl[i].style.left = wrapper.scrollLeft + 'px';
    thr[i].style.right = wrapper.scrollWidth - wrapper.offsetWidth - wrapper.scrollLeft + 'px';
  }
} //scrollTable

wrapper.addEventListener('scroll', scrollTable);

scrollTable();

12:00

pm
{CONTENT}
12:00

pm
12:30

pm
12:30

pm

我对JavaScript很在行。我将使用jquery2.2.3实现其余的调度功能。