Question

我有一个表在后端使用单个列表项上的ng-repeat填充。该表有一个日期列，需要固定在左侧，但仍然能够在几个月内向上和向下滚动。

所有其他不属于Date列的列应该能够向上，向下，向左或向右滚动。但是，当向上或向下滚动时，日期应始终与正确的行对齐。

var some_var = "Alice",
    other_var = "Bob";
var test = `${"Hello " + some_var + ". How is " + other_var + "?"}`;
console.log(test);

更新：

我能够找到这个在滚动时系住div的指令。它在我的应用程序中不起作用，但它看起来像是朝着正确方向迈出的一步。

How do I synchronize the scroll position of two divs using AngularJS?

这个JSfiddle http://jsfiddle.net/gdjz6go5/

Answer 1

在表格单元格中嵌套div以提供所需的溢出。您将需要在li上使用css高度来模仿流畅的桌子。

<style>
table {
  width: 200px;
}

table,
th,
td {
  border: 1px solid black;
}

table,
td div.div1 {
  border: 1px solid black;
  height: 50px;
  overflow-y: scroll;
}

table,
td div.div2 {
  border: 1px solid black;
  height: 50px;
  overflow-x: scroll;
  overflow-y: scroll;
  width: 200px;
}

ul {
  padding: 0;
  margin 0;
}
</style>

<table>
  <thead>
    <tr>
      <th>Date</th>
      <th>Col1</th>
      <th>Col2</th>
      <th>Col3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="div1">
          <ul>
            <li>Date 1</li>
            <li>Date 2</li>
            <li>Date 3</li>
            <li>Date 4</li>
            <li>Date 5</li>
          </ul>
          <div>
      </td>
      <td colspan=3>
        <div class="div2">asldkjlkasjd
          <table>
            <tr>
              <td>Content</td>
              <td>Content</td>
              <td>Content</td>
              <td>Content</td>
              <td>Content</td>
              <td>Content</td>
            </tr>
            <tr>
              <td>Content</td>
              <td>Content</td>
              <td>Content</td>
              <td>Content</td>
              <td>Content</td>
              <td>Content</td>
            </tr>
            <tr>
              <td>Content</td>
              <td>Content</td>
              <td>Content</td>
              <td>Content</td>
              <td>Content</td>
              <td>Content</td>
            </tr>
            <tr>
              <td>Content</td>
              <td>Content</td>
              <td>Content</td>
              <td>Content</td>
              <td>Content</td>
              <td>Content</td>
            </tr>
            <tr>
              <td>Content</td>
              <td>Content</td>
              <td>Content</td>
              <td>Content</td>
              <td>Content</td>
              <td>Content</td>
            </tr>
            <tr>
              <td>Content</td>
              <td>Content</td>
              <td>Content</td>
              <td>Content</td>
              <td>Content</td>
              <td>Content</td>
            </tr>
          </table>

        </div>
      </td>
    </tr>
  </tbody>
</table>

小提琴：https://jsfiddle.net/judsonmusic/8Lzbb0dn/

无限滚动表与固定列

1 个答案: