Excel就像HTML表格在x轴（全表）和y轴（固定标题）上可滚动

时间：2017-08-14 23:47:05

标签： html css css3

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

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

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

这是一种类似Microsoft Excel的行为（仅供阅读）。类似于：enter image description here

我看过几个帖子，但他们只解决了水平滚动或垂直滚动​​。我需要一个能同时适用于这两种情况的解决方案。

Here is a FIDDLE 我正在努力工作，但即使使用overflow-x: auto进行简单的horizo​​ntall滚动也无法正常工作。

帮助appreacited。我需要一个简单的HTML + CSS来嵌入ReactJS组件。

1 个答案:

答案 0 :(得分：3)

显然，这需要稍微调整以使其完美，但我假设你并没有留下所有那些鲜红色的边框等等。我冒昧地将柱子做大（力宽到400px）以更好地展示效果。

基本上，有一个position:absolute;强制滚动top等于父div的scrollTop。

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

＆＃13;
＆＃13; 
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;";
}
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题