Excel 类似 HTML 表格，可在 x 轴（完整表格）和 y 轴（固定标题）上滚动

Question

我想构建一个具有固定宽度列的表格。在大多数情况下，表格数据会水平和垂直溢出。

如果列的宽度大于视图宽度，则需要一个水平滚动条来滚动并查看所有表格列，同时滚动标题和数据。

如果数据的高度大于可用视图，则会出现一个垂直滚动框，但在滚动时保持标题固定，以便用户关注列。

这是一种类似于 Microsoft Excel 的行为（仅供阅读）。比如：

我看过几个帖子，但他们只解决了水平滚动或垂直滚动​​。我需要一个可以同时在两种条件下工作的解决方案。

Here is a FIDDLE 我正在努力工作，但即使是使用overflow-x: auto 的简单水平滚动也无法正常工作。我需要一个纯 HTML + CSS 来嵌入 ReactJS 组件。

Answer 1

显然，这需要一些调整才能使其完美，但我假设您不会留下所有那些鲜红色的边框等。我冒昧地将列放大（强制宽度为 400px）以更好地展示效果。

本质上，有一个position:absolute;，它的top 在滚动时被强制等于父 div 的 scrollTop。

http://jsfiddle.net/d13d2fab/3/

document.querySelector('.ux-data-table').onscroll = function (e) {
  // called when the window is scrolled.
  var topOfDiv = Math.max(document.querySelector(".ux-data-table").scrollTop - 2, 0);
  document.getElementsByTagName('thead')[0].style = "top:" + topOfDiv + "px;";
}

.ux-data-table {
  width: 100%;
  height: 200px;
  overflow: auto;
}

/* Prevents the header from overflowing the scrollbars */
.ux-data-table-inner {
  position: relative;
}

.ux-data-table table {
  width: 100%;
}

.ux-data-table table,
.ux-data-table th,
.ux-data-table td {
  background-color: red;
  color: white;
  border: 1px solid black;
  width: 400px;
  min-width: 400px;
}

.ux-data-table thead {
  position: absolute;
}
.ux-data-table tbody {
  margin-top: 20px;
  display:block;
}
.ux-data-table td {
  background-color: white;
  color: red;
  border: 1px solid black;
}

<div class='ux-data-table'>
  <div class='ux-data-table-inner'>
    <table>
      <thead>
        <tr>
          <th>#</th>
          <th>Col 1</th>
          <th>Col 2</th>
          <th>Col 3</th>
          <th>Col 4</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Item 1</td>
          <td>CD player</td>
          <td>Used</td>
          <td>Sony</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Item 2</td>
          <td>Variscope</td>
          <td>Used</td>
          <td>General</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Item 3</td>
          <td>Microphone</td>
          <td>New</td>
          <td>Mastersound</td>
        </tr>
        <tr>
          <td>4</td>
          <td>Item 4</td>
          <td>Cable</td>
          <td>New</td>
          <td>Techable</td>
        </tr>
        <tr>
          <td>4</td>
          <td>Item 4</td>
          <td>Cable</td>
          <td>New</td>
          <td>Techable</td>
        </tr>
        <tr>
          <td>4</td>
          <td>Item 4</td>
          <td>Cable</td>
          <td>New</td>
          <td>Techable</td>
        </tr>
        <tr>
          <td>4</td>
          <td>Item 4</td>
          <td>Cable</td>
          <td>New</td>
          <td>Techable</td>
        </tr>
        <tr>
          <td>4</td>
          <td>Item 4</td>
          <td>Cable</td>
          <td>New</td>
          <td>Techable</td>
        </tr>
        <tr>
          <td>4</td>
          <td>Item 4</td>
          <td>Cable</td>
          <td>New</td>
          <td>Techable</td>
        </tr>
        <tr>
          <td>4</td>
          <td>Item 4</td>
          <td>Cable</td>
          <td>New</td>
          <td>Techable</td>
        </tr>
        <tr>
          <td>4</td>
          <td>Item 4</td>
          <td>Cable</td>
          <td>New</td>
          <td>Techable</td>
        </tr>
        <tr>
          <td>4</td>
          <td>Item 4</td>
          <td>Cable</td>
          <td>New</td>
          <td>Techable</td>
        </tr>
        <tr>
          <td>4</td>
          <td>Item 4</td>
          <td>Cable</td>
          <td>New</td>
          <td>Techable</td>
        </tr>
        <tr>
          <td>4</td>
          <td>Item 4</td>
          <td>Cable</td>
          <td>New</td>
          <td>Techable</td>
        </tr>
        <tr>
          <td>4</td>
          <td>Item 4</td>
          <td>Cable</td>
          <td>New</td>
          <td>Techable</td>
        </tr>
        <tr>
          <td>4</td>
          <td>Item 4</td>
          <td>Cable</td>
          <td>New</td>
          <td>Techable</td>
        </tr>
        <tr>
          <td>4</td>
          <td>Item 4</td>
          <td>Cable</td>
          <td>New</td>
          <td>Techable</td>
        </tr>
        <tr>
          <td>4</td>
          <td>Item 4</td>
          <td>Cable</td>
          <td>New</td>
          <td>Techable</td>
        </tr>
        <tr>
          <td>4</td>
          <td>Item 4</td>
          <td>Cable</td>
          <td>New</td>
          <td>Techable</td>
        </tr>
        <tr>
          <td>4</td>
          <td>Item 4</td>
          <td>Cable</td>
          <td>New</td>
          <td>Techable</td>
        </tr>
        <tr>
          <td>4</td>
          <td>Item 4</td>
          <td>Cable</td>
          <td>New</td>
          <td>Techable</td>
        </tr>
        <tr>
          <td>4</td>
          <td>Item 4</td>
          <td>Cable</td>
          <td>New</td>
          <td>Techable</td>
        </tr>
        <tr>
          <td>4</td>
          <td>Item 4</td>
          <td>Cable</td>
          <td>New</td>
          <td>Techable</td>
        </tr>
        <tr>
          <td>4</td>
          <td>Item 4</td>
          <td>Cable</td>
          <td>New</td>
          <td>Techable</td>
        </tr>
        <tr>
          <td>4</td>
          <td>Item 4</td>
          <td>Cable</td>
          <td>New</td>
          <td>Techable</td>
        </tr>
        <tr>
          <td>4</td>
          <td>Item 4</td>
          <td>Cable</td>
          <td>New</td>
          <td>Techable</td>
        </tr>
        <tr>
          <td>4</td>
          <td>Item 4</td>
          <td>Cable</td>
          <td>New</td>
          <td>Techable</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>