具有固定标题的HTML表？

JavaScript CSS

十三Stafan

2020-03-26

是否有跨浏览器的CSS / JavaScript技术来显示较长的HTML表，以使列标题在屏幕上保持固定并且不随表主体滚动。考虑一下Microsoft Excel中的“冻结窗格”效果。

我希望能够滚动浏览表的内容，但始终能够看到顶部的列标题。

第3768篇《具有固定标题的HTML表？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共13个回答
卡卡西 2020.03.26

不知何故，我最终Position:Sticky在我的案子上做得很好：

table{
  width: 100%;
  border: collapse;
}

th{
    position: sticky;
    top: 0px;
    border: 1px solid black;
    background: #ff5722;
    color: #f5f5f5;
    font-weight: 600;
}
td{
    background: #d3d3d3;
    border: 1px solid black;
    color: #f5f5f5;
    font-weight: 600;
}

div{
  height: 150px
  overflow: auto;
  width: 100%
}
<div>
    <table>
        <thead>
            <tr>
                <th>header 1</th>
                <th>header 2</th>
                <th>header 3</th>
                <th>header 4</th>
                <th>header 5</th>
                <th>header 6</th>
                <th>header 7</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>data 1</td>
                <td>data 2</td>
                <td>data 3</td>
                <td>data 4</td>
                <td>data 5</td>
                <td>data 6</td>
                <td>data 7</td>
            </tr>
            <tr>
                <td>data 1</td>
                <td>data 2</td>
                <td>data 3</td>
                <td>data 4</td>
                <td>data 5</td>
                <td>data 6</td>
                <td>data 7</td>
            </tr>
            <tr>
                <td>data 1</td>
                <td>data 2</td>
                <td>data 3</td>
                <td>data 4</td>
                <td>data 5</td>
                <td>data 6</td>
                <td>data 7</td>
            </tr>
            <tr>
                <td>data 1</td>
                <td>data 2</td>
                <td>data 3</td>
                <td>data 4</td>
                <td>data 5</td>
                <td>data 6</td>
                <td>data 7</td>
            </tr>
            <tr>
                <td>data 1</td>
                <td>data 2</td>
                <td>data 3</td>
                <td>data 4</td>
                <td>data 5</td>
                <td>data 6</td>
                <td>data 7</td>
            </tr>
            <tr>
                <td>data 1</td>
                <td>data 2</td>
                <td>data 3</td>
                <td>data 4</td>
                <td>data 5</td>
                <td>data 6</td>
                <td>data 7</td>
            </tr>
            <tr>
                <td>data 1</td>
                <td>data 2</td>
                <td>data 3</td>
                <td>data 4</td>
                <td>data 5</td>
                <td>data 6</td>
                <td>data 7</td>
            </tr>
            <tr>
                <td>data 1</td>
                <td>data 2</td>
                <td>data 3</td>
                <td>data 4</td>
                <td>data 5</td>
                <td>data 6</td>
                <td>data 7</td>
            </tr>
            <tr>
                <td>data 1</td>
                <td>data 2</td>
                <td>data 3</td>
                <td>data 4</td>
                <td>data 5</td>
                <td>data 6</td>
                <td>data 7</td>
            </tr>
            <tr>
                <td>data 1</td>
                <td>data 2</td>
                <td>data 3</td>
                <td>data 4</td>
                <td>data 5</td>
                <td>data 6</td>
                <td>data 7</td>
            </tr>
            <tr>
                <td>data 1</td>
                <td>data 2</td>
                <td>data 3</td>
                <td>data 4</td>
                <td>data 5</td>
                <td>data 6</td>
                <td>data 7</td>
            </tr>
            <tr>
                <td>data 1</td>
                <td>data 2</td>
                <td>data 3</td>
                <td>data 4</td>
                <td>data 5</td>
                <td>data 6</td>
                <td>data 7</td>
            </tr>
            <tr>
                <td>data 1</td>
                <td>data 2</td>
                <td>data 3</td>
                <td>data 4</td>
                <td>data 5</td>
                <td>data 6</td>
                <td>data 7</td>
            </tr>
            <tr>
                <td>data 1</td>
                <td>data 2</td>
                <td>data 3</td>
                <td>data 4</td>
                <td>data 5</td>
                <td>data 6</td>
                <td>data 7</td>
            </tr>
        </tbody>
    </table>
</div>

Stafan达蒙L 2020.03.26

这是对马克西米利安·希尔斯（Maximilian Hils）发布的答案的改进的答案。

此版本可在Internet Explorer 11中正常运行，而不会闪烁：

var headerCells = tableWrap.querySelectorAll("thead td");
for (var i = 0; i < headerCells.length; i++) {
    var headerCell = headerCells[i];
    headerCell.style.backgroundColor = "silver";
}
var lastSTop = tableWrap.scrollTop;
tableWrap.addEventListener("scroll", function () {
    var stop = this.scrollTop;
    if (stop < lastSTop) {
        // Resetting the transform for the scrolling up to hide the headers
        for (var i = 0; i < headerCells.length; i++) {
            headerCells[i].style.transitionDelay = "0s";
            headerCells[i].style.transform = "";
        }
    }
    lastSTop = stop;
    var translate = "translate(0," + stop + "px)";
    for (var i = 0; i < headerCells.length; i++) {
        headerCells[i].style.transitionDelay = "0.25s";
        headerCells[i].style.transform = translate;
    }
});
神乐 2020.03.26

使用最新版本的jQuery，并包含以下JavaScript代码。

$(window).scroll(function(){
  $("id of the div element").offset({top:$(window).scrollTop()});
});
宝儿前端 2020.03.26

我发现了这种解决方法-将表头行移到数据上方的表中：

<html>
<head>
	<title>Fixed header</title>
	<style>
		table td {width:75px;}
	</style>
</head>

<body>
<div style="height:auto; width:350px; overflow:auto">
<table border="1">
<tr>
	<td>header 1</td>
	<td>header 2</td>
	<td>header 3</td>
</tr>
</table>
</div>

<div style="height:50px; width:350px; overflow:auto">
<table border="1">
<tr>
	<td>row 1 col 1</td>
	<td>row 1 col 2</td>
	<td>row 1 col 3</td>		
</tr>
<tr>
	<td>row 2 col 1</td>
	<td>row 2 col 2</td>
	<td>row 2 col 3</td>		
</tr>
<tr>
	<td>row 3 col 1</td>
	<td>row 3 col 2</td>
	<td>row 3 col 3</td>		
</tr>
<tr>
	<td>row 4 col 1</td>
	<td>row 4 col 2</td>
	<td>row 4 col 3</td>		
</tr>
<tr>
	<td>row 5 col 1</td>
	<td>row 5 col 2</td>
	<td>row 5 col 3</td>		
</tr>
<tr>
	<td>row 6 col 1</td>
	<td>row 6 col 2</td>
	<td>row 6 col 3</td>		
</tr>
</table>
</div>


</body>
</html>

神奇飞云 2020.03.26

这是用于固定表头的jQuery插件。它允许整个页面滚动，并在到达顶部时冻结标题。它与Twitter Bootstrap表很好地配合。

GitHub存储库：https : //github.com/oma/table-fixed-header

它不只滚动表内容。寻找其他工具，作为其他答案之一。您可以决定最适合您的情况。

小胖小胖 2020.03.26

两个div，一个用于标头，一个用于数据。使数据div可滚动，并使用JavaScript将标头中的列宽设置为与数据中的宽度相同。我认为数据列的宽度需要固定而不是动态。

逆天伽罗宝儿 2020.03.26

:)

不太干净，但是纯HTML / CSS解决方案。

table {
    overflow-x:scroll;
}

tbody {
    max-height: /*your desired max height*/
    overflow-y:scroll;
    display:block;
}

针对IE8 + JSFiddle示例进行了更新

凯乐 2020.03.26

CSS属性position: sticky在大多数现代浏览器中都有很好的支持（Edge出现了问题，请参见下文）。

这使我们可以很轻松地解决固定标头的问题：

thead th { position: sticky; top: 0; }

Safari需要供应商前缀：-webkit-sticky。

对于Firefox，我必须将min-height: 0父元素添加到一个。我完全忘记了为什么需要这样做。

最不幸的是，Microsoft Edge实施似乎只是半成品。至少，我在测试中有一些闪烁且未对齐的表格单元。该桌子仍然可用，但存在重大美学问题。

猪猪 2020.03.26

这里发布的大多数解决方案都需要jQuery。如果您正在寻找独立于框架的解决方案，请尝试使用Grid：http : //www.matts411.com/post/grid/

它托管在Github上：https : //github.com/mmurph211/Grid

它不仅支持固定的页眉，还支持固定的左列和页脚。

蛋蛋猿 2020.03.26

这可以用四行代码来彻底解决。

如果您只关心现代浏览器，则可以使用CSS转换轻松实现固定标头。听起来很奇怪，但效果很好：

  • HTML和CSS保持不变。
  • 没有外部JavaScript依赖性。
  • 四行代码。
  • 适用于所有配置（表布局：固定等）。
document.getElementById("wrap").addEventListener("scroll", function(){
   var translate = "translate(0,"+this.scrollTop+"px)";
   this.querySelector("thead").style.transform = translate;
});

除Internet Explorer 8之外，对CSS转换的支持广泛可用。

这是完整的示例供参考：

document.getElementById("wrap").addEventListener("scroll",function(){
   var translate = "translate(0,"+this.scrollTop+"px)";
   this.querySelector("thead").style.transform = translate;
});
/* Your existing container */
#wrap {
    overflow: auto;
    height: 400px;
}

/* CSS for demo */
td {
    background-color: green;
    width: 200px;
    height: 100px;
}
<div id="wrap">
    <table>
        <thead>
            <tr>
                <th>Foo</th>
                <th>Bar</th>
            </tr>
        </thead>
        <tbody>
            <tr><td></td><td></td></tr>
            <tr><td></td><td></td></tr>
            <tr><td></td><td></td></tr>
            <tr><td></td><td></td></tr>
            <tr><td></td><td></td></tr>
            <tr><td></td><td></td></tr>
            <tr><td></td><td></td></tr>
            <tr><td></td><td></td></tr>
            <tr><td></td><td></td></tr>
            <tr><td></td><td></td></tr>
            <tr><td></td><td></td></tr>
            <tr><td></td><td></td></tr>
        </tbody>
    </table>
</div>

泡芙A 2020.03.26

我还创建了一个可解决此问题的插件。我的项目jQuery.floatThead已经存在了4年多了，并且非常成熟。

它不需要外部样式，也不希望您的表以任何特定方式设置样式。它支持Internet Explorer9 +和Firefox / Chrome。

目前（2018-05）它具有：

GitHub上的405次提交和998星

这里的许多（不是全部）答案都是快速的技巧，它们可能已经解决了一个人遇到的问题，但是并不能在每个桌子上都起作用。

其他一些插件较旧，可能与Internet Explorer兼容，但在Firefox和Chrome上将无法使用。

Tony凯 2020.03.26

从CSS规范之外解决该问题的所有尝试都是我们真正想要的苍白阴影：按照THEAD的隐含承诺交付。

很长一段时间以来，这个表格冻结标题问题一直是HTML / CSS的一个开放式伤口。

在一个完美的世界中，将有一个纯CSS解决此问题的方法。不幸的是，似乎没有一个合适的解决方案。

有关此主题的相关标准讨论包括：

更新：Firefox position:sticky版本为32。每个人都赢了！

西门 2020.03.26

我刚刚完成了一个jQuery插件的组装，该插件将使用有效的HTML来获取有效的单个表（必须具有thead和tbody），并将输出具有固定页眉，可选固定页脚的表，该页脚可以是克隆的页眉，也可以是任何您选择的内容（分页等）。如果要利用较大的监视器，则在调整浏览器大小时，它还将调整表的大小。如果表的列不能全部适合视图，则另一个附加功能是可以侧向滚动。

http://fixedheadertable.com/

在github上：http : //markmalek.github.com/Fixed-Header-Table/

设置非常容易，您可以为其创建自定义样式。它还在所有浏览器中使用圆角。请记住，我刚刚发布了它，因此从技术上来说它仍然是beta版，我要解决的问题很少。

它适用于Internet Explorer 7，Internet Explorer 8，Safari，Firefox和Chrome。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android