Question

我的日历包含左侧和右侧的用户列表 - 带有单元格的日期。最重要的是，当滚动页面到底部时我需要修复日期。我不知道如何制作它，因为我<table>的{{1}}主日期为<table>，因为我需要滚动并修复左侧用户。

滚动到页面底部时，如何修复overflow: scroll日期在顶部？它现在很简单<thead>，因为我有嵌套表和position: absolute;。拆分表与thead和tbody在两个不同的表中的日期？并捕获事件overflow: scroll;并将其应用于其他表？

JSFiddle - https://jsfiddle.net/p69j0L5h/2/

P.S。在实际情况中，所有单元格都相等（关于宽度和高度）。这只是一个例子。

Answer 1

你的命题 - 可以工作，但这并不意味着你应该这样做。非常复杂的标记，并且您正在以一种不太适合表格的方式拆分表格数据。

双轴粘性/冷冻集管非常可行并且非常可行。

请参阅此链接：http://tympanus.net/Tutorials/StickyTableHeaders/index3.html

Answer 2

只需使用

＆＃13;

//makes thead stay in fixed position
thead {
 position: fixed;
}

//makes td 100px wide
td {
 width: 100px;  
}

//makes scroll bar on bottom appear up top
table {
 height: 200px; /*think that 100% would work too*/
}

＆＃13;

Answer 3

随着html布局的变化，我可以实现你想要的！但我不确定这是否正确。

html看起来像这样：

<div ng-controller="MainCtrl" class="container main">
  <table class="table table-bordered">
    <thead>
      <tr class="fixed">
      <th>blank space</th>
        <th ng-repeat="date in dates">
          {{date}}
        </th>
      </tr>
    </thead>

  </table>
  <table  class="table table-bordered" style="margin-top:50px">
     <tbody style="margin-top:30px">
      <tr ng-repeat="user in users">
        <td>{{user}}</td>
        <td  ng-repeat="date in dates"></td>
      </tr>
    </tbody>
  </table>
</div>

我创造了一个相同的小提琴：https://jsfiddle.net/gpa5v9L7/

带有水平和垂直滚动的固定thead的表

3 个答案: