冻结 HTML 表格列的宽度答案

【问题标题】：Freezing the width of an HTML table column冻结 HTML 表格列的宽度
【发布时间】：2012-11-23 16:37:27
【问题描述】：

我正在尝试制作一个具有固定列的表格，并且我正在遵循以下示例：

容器：

 div { 
            width: 600px; 
            overflow-x:scroll;  
            margin-left:5em; 
            overflow-y:visible;
            padding-bottom:1px;
        }

固定列：

.headcol {
            position:absolute; 
            width:5em; 
            left:0;
            top:auto;
            border-right: 0px none black; 
            border-top-width:3px; /*only relevant for first row*/
            margin-top:-3px; /*compensate for top border*/
        }

问题在于，如果容器具有固定高度，例如 100 像素，则固定列会保持其默认高度，而不会附加到滚动条上。

【问题讨论】：

我不明白这个问题... 默认高度是什么意思，附加到滚动条是什么意思？
我认为他的意思是这就是问题所在：jsfiddle.net/YMvk9/783
哦，好的。所以问题实际上是：我想固定第一列，但整个表格也应该可以垂直滚动？然后不要提出一个新的条件，即您也想要固定第一行。 ;) 这实际上会使它变得非常有趣。我已经发现 JSFiddle 中的示例是一个非常好的技巧。非常聪明...
我已经编辑了我的答案并添加了不同的方法

标签： html css fixed

【解决方案1】：

尝试添加一个额外的容器，您可以将其设置为相对定位。

div#container{
    position:relative;
    height:100px;
    overflow:scroll;
}

您可以在下面的示例中看到固定行与其余行垂直滚动。

http://jsfiddle.net/VRNsX/

如果您不反对使用一点 jQuery，这里是我制定的另一种方法：

$('#tbl').scroll(function(e) {
    var self = this;
    $('.headcol').each(function() {
        $(this).css({
            'top': ($(this).index('.headcol') * $(this).outerHeight() + 3) - $(self).scrollTop()
        });
    });
});

http://jsfiddle.net/YMvk9/786/

【讨论】：

@Asad，当你滚动时我工作得很好，但是我怎样才能在开始时隐藏固定列，比如不显示所有 9 行？