冻结宽度为 100% 的 html 标头答案

【问题标题】：Freezing html header with width 100%冻结宽度为 100% 的 html 标头
【发布时间】：2014-05-28 10:30:38
【问题描述】：

我正在冻结表格的标题，所以当您向下滚动时。标题保留。

使用 Laerte Mercier Junior 推荐的 freezeHeader here

效果很好。

但是，如果您向下滚动，然后调整窗口宽度（也称为表格宽度），则会出现重复的标题。（我的表格宽度设置为 100%，好像不太喜欢）

注意：我已将标题设置为清晰的背景，因此您可以看到后面的重复项。所以忽略通过表头查看行数据的能力。

问题是，如果您滚动一点，然后使窗口变小，您可以向右滚动以查看完整的标题（它不会缩放）。

我使用了一个宽度为 100% 的通用表格：

<table class="gridView" id="table1" style="width:100%">

打电话

$("#table1").freezeHeader({
   'height': '300px'
});

在提琴手中可以看到问题： http://jsfiddle.net/pXC3C/

滚动，然后更改窗口大小以使其更小 - 出现右侧滚动条，+ 重复标题

【问题讨论】：

@Aravona 是的，这在理论上不是问题，因为您永远看不到后面的那个.. 直到您更改窗口宽度，并且它错误地挤出另一个，因为它没有缩小规模。
为什么不使用 css 而不是插件..？ jsfiddle.net/Lr4r6/1 你只需要在 css 中更改一行，以防你的标题超过 1 行.. 但除此之外它可以工作:)

标签： javascript jquery html css

【解决方案1】：

尝试替换：

if (params && params.height !== undefined) {
            container.css("top", obj.offset().top + "px");
            container.css("position", "absolute");
        }

与：

if (params && params.height !== undefined) {
            container.css("top", obj.offset().top + "px");
            container.css("position", "absolute");
            container.width("calc(100% - 33px)");
        }

【讨论】：

效果很好……但为什么是-33px？这是滚动条的宽度还是什么
-33px 是滚动条的宽度是的。否则，当您向下滚动时，100% 会覆盖该栏，并在您向上滚动回顶部时弹回。 -33px 为我工作以防止这种情况发生。

【解决方案2】：

我在哪里遇到过类似的问题我想你会在这里，我想这个例子会帮助你DEMO

HTML

<table class="tablesorter" cellspacing="1">
<thead>
<tr>
<th>first name</th>
<th>last name</th>
<th>age</th>
<th>total</th>
<th>discount</th>
<th>date</th>
</tr>
</thead>
.....

【讨论】：