Question

我知道有很多这些问题已经得到解决，但不符合我的要求。我有一个未知高度和宽度的表，我需要，如果表太高，以至于需要滚动它，表头保持固定并按照滚动。我见过的所有解决方案都需要固定的桌面高度。我还希望滚动在仍然可用时不可见。这可以完成还是需要固定高度？

我的CSS到目前为止允许我垂直和水平滚动（我只想要垂直滚动）但具有固定高度和可见滚动条：

import subporcess
subprocess.call('cd /home/bin; ./Upgrade', shell=True)

这是我的HTML：

table.sol-compare-table {
    box-sizing: border-box;
    overflow: hidden;
    display: table;
    width: 100%;
}
table.sol-compare-table thead, table.sol-compare-table tbody {
    float: left;
    width: 100%;
}
table.sol-compare-table tbody {
    overflow: auto;
    height: 150px;
    /*overflow-x: hidden;*/
}
table.sol-compare-table tr {
    width: 100%;
    display: table;
    text-align: left;
}

修改

我尝试使用position：固定在表格标题处，几乎完成了我之后所做的事情，只是它应该始终固定在页面顶部（当向下滚动它应该跟随滚动但在浏览器窗口中的位置相同）。这个JSfiddle是最简单的方式来展示我在atm的地方我猜; http://jsfiddle.net/rwqkokgy/5/

Answer 1

对于垂直滚动条您必须使用overflow-y:scroll; overflow-x:hidden;

您可以使用overflow-y:auto;，垂直滚动条将根据表格内容显示/隐藏。

有一个例子，但有两个表。第一个是表头，第二个是表内容。也许你可以通过这种方式实现。

jsfiddle example

在这个例子中也是一个按钮。用于使用和不使用滚动条进行模拟，具体取决于表格内容。

该按钮和js函数名为chVl您可以删除。如果您调整浏览器大小，则使用名为checkW的第一个函数。

我希望这能帮到你。

修改：

如果您想要所有时间的垂直滚动条，那么请执行下一步（在提供的jsfiddle示例中）：

从onload

onresize

body

删除完整的javascript
在#container（css）中overflow-y从auto替换为scroll

关于height中的#container，您可以根据自己的需要进行更改。

当然，删除button，就像我上面写的那样。他的目的只是为了模拟，没有别的。

Answer 2

我现在正在使用名为＆＃34;粘性＆＃34;的Angular指令。这使得＆＃34;粘＆＃34;元素（我设置为表头）在滚动时粘在屏幕顶部。

有关此指令的详细信息，请访问以下链接：http://angularscript.com/angularjs-directive-create-fixed-elements-scroll-angular-sticky/

这很容易实现，几乎不需要编码。

具有固定标题和动态高度的表

2 个答案: