Question

我在固定大小的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

Answer 1

您可能需要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;
};

Answer 2

你想要实现的是可滚动的表格，其中标题与正文一起滚动，但在向上/向下滚动时保持固定。

如果没有一点Javascript / jQuery，这是不可能的。

你正在做的事情非常接近最终结果。以下代码段将向您说明。

稍微改变你的标记。在div中换行表并修复table标记。接下来，我们需要将headerClone绝对与container保持一致。我们还需要使用table-layout: fixed;来保持表的大小不变。此外，需要修复th的大小，以便两个表具有相同的宽度。

就是这样。现在使用jQuery / Javascript，只需处理scroll上的container事件，并了解它使用.scrollTop()垂直滚动了多少。将此滚动距离分配给top的CSS headerClone属性。现在标题将显示fixed与container相关联。

还有一件事......给th一些颜色，以便在滚动时通过它看不到身体。

您的更新小提琴：http://jsfiddle.net/abhitalks/njss2t05/2/

的段：

var $header = $("#headerClone"); $("#container").on("scroll", function() { var top = $(this).scrollTop() + "px"; $header.css({"top": top, "left": "0px;"}); });

#container { width: 240px; height: 160px; background-color: yellow; overflow: auto; position: relative; } #headerClone { position: absolute; top: 0; left: 0; } table { table-layout: fixed; width: 320px; border: 1px solid gray; border-collapse: collapse; } th, td { width: 120px; padding: 8px; border: 1px solid gray; white-space: nowrap; } th { background-color: #ddd; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"> <div id="headerClone"> <table> <thead><tr><th>Heading 1</th><th>Heading 2</th><th>Heading 3</th></tr></thead> <tbody></tbody> </table> </div> <div id="tableWrapper"> <table> <thead><tr><th>Heading 1</th><th>Heading 2</th><th>Heading 3</th></tr></thead> <tbody> <tr><td>Data Long 1</td><td>Data Long 2</td><td>Data Long 3</td></tr> <tr><td>Data Long 1</td><td>Data Long 2</td><td>Data Long 3</td></tr> <tr><td>Data Long 1</td><td>Data Long 2</td><td>Data Long 3</td></tr> <tr><td>Data Long 1</td><td>Data Long 2</td><td>Data Long 3</td></tr> <tr><td>Data Long 1</td><td>Data Long 2</td><td>Data Long 3</td></tr> <tr><td>Data Long 1</td><td>Data Long 2</td><td>Data Long 3</td></tr> </tbody> </table> </div> </div>

Answer 3

在下面的小提琴中有水平滚动条来滚动原始和克隆的标题垂直滚动条单独滚动原始标题

[http://jsfiddle.net/Lsn8bnwr/1/][1]

这是你想要的吗？

如何拆分overflow-x和overflow-y

3 个答案: