Question

我正在尝试创建一个调度系统，并且遇到了网格问题。我想要一个table左右th单元格固定到位，但能够在主体td单元格中水平滚动。每td个主体tr个单元格的数量是动态的，并且可以随着时隙中约会的数量增加或减少而缩小和增长。我在这里环顾四周并发现了类似的问题，但他们只是要求修复左栏，我需要两个。我试着调整我在答案中看到的内容，但它没有用。

我目前的原型，在这里：https://jsfiddle.net/by2r6pkh/1/;失败了，所以我想我会寻求帮助。对于它的价值，我只针对浏览器定位Chrome。

Answer 1

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

将您的TH元素从position: absolute更改为position: relative。这将解决包装器高度的问题，因此您可以删除overflow-y: visible。它还解决了TH元素高度的问题。

您也可以删除：

position: relative;。
margin-left: 55px。
left: 0;来自：小孩。
right: 0;来自：last-child。

Vanilla 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();

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();

* {
  margin: 0;
  padding: 0;
}
body {
  margin: 32px;
}
.wrapper {
  overflow-x: scroll;
  /* scrolls the entire table, not just the tds */
  width: 400px;
}
table {
  font: 14px arial;
  border-collapse: collapse;
  table-layout: fixed;
  /* fixes column widths, but overflows */
  width: calc(100% - 110px);
  /* 2x left margin */
}
td,
th {
  border: 1px solid #CCC;
  padding: 2px;
}
td {
  background: #FFF;
  width: 150px;
}
th {
  position: relative;
  background: #EEE;
  width: 50px;
}

<div class="wrapper">
  <table>
    <tr>
      <th>12:00
        <br />pm</th>
      <td>{CONTENT}</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <th>12:00
        <br />pm</th>
    </tr>
    <tr>
      <th>12:30
        <br />pm</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <th>12:30
        <br />pm</th>
    </tr>
  </table>
</div>

<小时/> jQuery解决方案：

$('.wrapper')
  .scroll(function() {
    $('.wrapper th:nth-child(1)').css('left', this.scrollLeft);
    $('.wrapper th:nth-last-child(1)').css(
      'right', this.scrollWidth - this.offsetWidth - this.scrollLeft
     );
  })
  .scroll();

$('.wrapper')
  .scroll(function() {
    $('.wrapper th:nth-child(1)').css('left', this.scrollLeft);
    $('.wrapper th:nth-last-child(1)').css('right', this.scrollWidth - this.offsetWidth - this.scrollLeft);
  })
  .scroll();

* {
  margin: 0;
  padding: 0;
}
body {
  margin: 32px;
}
.wrapper {
  overflow-x: scroll;
  /* scrolls the entire table, not just the tds */
  width: 400px;
}
table {
  font: 14px arial;
  border-collapse: collapse;
  table-layout: fixed;
  /* fixes column widths, but overflows */
  width: calc(100% - 110px);
  /* 2x left margin */
}
td,
th {
  border: 1px solid #CCC;
  padding: 2px;
}
td {
  background: #FFF;
  width: 150px;
}
th {
  position: relative;
  background: #EEE;
  width: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <table>
    <tr>
      <th>12:00
        <br />pm</th>
      <td>{CONTENT}</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <th>12:00
        <br />pm</th>
    </tr>
    <tr>
      <th>12:30
        <br />pm</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <th>12:30
        <br />pm</th>
    </tr>
  </table>
</div>

Answer 2

也许以下链接可以帮助您。

https://datatables.net/extensions/fixedcolumns/examples/initialisation/left_right_columns.html

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

2 个答案: