Question

这又是这些旧问题之一：我想让HTML-Table的第四列粘贴（仅水平）。

如果它是一个较小的表，有几种解决方案可以正常工作。不幸的是我的尺寸很大，我希望它能在整个屏幕上传播。因此，将表格打包成可滚动div的大多数解决方案都没有用，因为它们将滚动条放在div的最末端 - 这是相当远的距离。

桌子上还有一些小内容，所以它不是100％的屏幕...

互联网上有一些想法可以为冻结的tds提供position: absolute;属性，这对我来说并不起作用。

http://www.fixedheadertable.com/似乎很好 - 不幸的是直到现在它只是弄乱了我的桌子......

编辑1：它是一个非常庞大的表，它显示数据库并使用其值进行一些计算。这是我的一个问题：它总是具有相同数量的列（大约50）但行数不同。但总的来说，这个表格很简单，毫无意外：

<table id="calctbl">
    <thead class="fixed">
        <tr id="table-head">
            <th class="several classes">Number<br>
                <br>Pos. Nr.</th>                        
            <th class="several classes">Info 1</th>
            <th class="several classes"><div>More infos</div></th>
            <th class="several classes">Here<br>are some more<br>infos</th>
            <th>... and it goes on ...</th>
        </tr>
</thead><tbody>
    <tr>
        <td class="several other classes">vals...</td>                        
        <td class="several other classes">more vals</td>
        <td class="several classes"><div>and some more</div></td>
        <td class="several other classes">...</td>
        <td>... and it goes on ...</td>
    </tr>
    <tr>
        <!-- No big surprises, it just goes on -->
    </tr>
</tbody>
</table>

我也将它用于第一个标题行：HTML table with fixed headers?

编辑2：

http://www.fixedheadertable.com/ - 没有真正的解释，并且出于某种原因，它只是弄乱了一切
http://tympanus.net/codrops/2014/01/09/sticky-table-headers-columns/ 有上述问题：它需要一个限制div围绕它
how do I create an HTML table with fixed/frozen left column and scrollable body? 答案＃1：与div相同的问题
职位：固定 - 对我来说根本不起作用
How can I make the first and second column of a table sticky回答＃1 - 不做任何工作
http://massless.org/_tests/grid1/ - 似乎很老，需要div
http://learndevelopingmyway.blogspot.co.at/2012/03/sticky-columnsheaders-freeze-pane-in.html这是一张桌子吗？

Answer 1

根据我的经验，fixedheadertable工作得很好。尝试使用你的css，尤其是容器div的max-height和其他与高度相关的属性，以限制大表的大小。如果你可以展示你的桌子会更容易，但如果我理解正确，这个CSS可以帮助：

.fht-tbody{
  max-height: 300px;
}

如果在原始页面（http://www.fixedheadertable.com/）上使用某个检查器，则可以通过定位.fht-tbody并设置上述值来轻松测试。

没有外部div的粘性td柱

1 个答案: