javascript - 如何拆分溢出x和溢出y

我在固定大小的div内有一张桌子。如果表溢出div，我希望出现滚动条。我还想在向下滚动时克隆​​表的标题，以便标题是持久的。我的问题是我希望水平滚动条滚动克隆的标题和原始表，垂直滚动条仅移动原始表。

我可以使用javascript克隆标头，但无法以某种方式设置结果的样式以实现所需的结果。下面是尝试HTML / CSS的一种方法，假定已克隆的标头已经就位。我有很多额外的滚动条，我知道这是由于CSS规范本身造成的。我希望有一个解决方法。

的HTML

<div id="container">
    <table id="headerClone">
        <tbody>
            <tr>
                <th>Heading 1</th>
                <th>Heading 2</th>
                <th>Heading 3</th>
            </tr>
        </tbody>
    </table>
    <div id="tableWrapper">
        <table>
            <tbody>
                <tr>
                    <th>Heading 1</th>
                    <th>Heading 2</th>
                    <th>Heading 3</th>
                </tr>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                    <td>Data 3</td>
                </tr>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                    <td>Data 3</td>
                </tr>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                    <td>Data 3</td>
                </tr>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                    <td>Data 3</td>
                </tr>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                    <td>Data 3</td>
                </tr>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                    <td>Data 3</td>
                </tr>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                    <td>Data 3</td>
                </tr>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                    <td>Data 3</td>
                </tr>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                    <td>Data 3</td>
                </tr>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                    <td>Data 3</td>
                </tr>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                    <td>Data 3</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

的CSS

#container {
    width: 10em;
    height: 10em;
    display: flex;
    flex-direction: column;
    overflow-x: auto;
}
#headerClone {
    flex: 0 0 auto;
}
#tableWrapper {
    flex: 1 1 auto;
    overflow-y: auto;
}

链接到jsfiddle

最佳答案

您可能需要使用JavaScript。

片段：

var cont= document.getElementById('container');
var head= document.getElementById('headerClone');
var wrap= document.getElementById('tableWrapper');
head.style.width= cont.clientWidth+'px';
cont.onscroll = function() {
  head.scrollLeft= this.scrollLeft;
};

#container {
  width: 10em;
  height: 10em;
  background-color: yellow;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

#headerClone {
  flex: 0 0 auto;
  position: absolute;
  overflow: hidden;
  background: yellow;
}

#tableWrapper {
    flex: 1 1 auto;
}

<div id="container">
    <div id="headerClone">
      <table>
        <tbody>
          <tr>
            <th>Heading 1</th>
            <th>Heading 2</th>
            <th>Heading 3</th>
          </tr>
      </tbody>
    </table>
    </div>
    <div id="tableWrapper">
        <table>
            <tbody>
                <tr>
                    <th>Heading 1</th>
                    <th>Heading 2</th>
                    <th>Heading 3</th>
                </tr>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                    <td>Data 3</td>
                </tr>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                    <td>Data 3</td>
                </tr>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                    <td>Data 3</td>
                </tr>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                    <td>Data 3</td>
                </tr>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                    <td>Data 3</td>
                </tr>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                    <td>Data 3</td>
                </tr>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                    <td>Data 3</td>
                </tr>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                    <td>Data 3</td>
                </tr>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                    <td>Data 3</td>
                </tr>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                    <td>Data 3</td>
                </tr>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                    <td>Data 3</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

我将headerClone移到了父div元素中：

<div id="headerClone">
  <table>
    <tr><th>Heading 1<th>Heading 2<th>Heading 3</th>
  </table>
</div>

我将这些样式添加到headerClone：

#headerClone {
  position: absolute;
  overflow: hidden;
  background: yellow;
}

使用JavaScript，我将headerClone的宽度设置为与container的宽度匹配，并在container上添加了滚动事件，该事件将headerClone左右移动，但不能上下移动：

var cont= document.getElementById('container');
var head= document.getElementById('headerClone');
head.style.width= cont.clientWidth+'px';
cont.onscroll = function() {
  head.scrollLeft= this.scrollLeft;
};