[英]Freezing the width of an HTML table column
我正在尝试制作一个具有固定列的表,并且我正在关注以下示例:
http://jsfiddle.net/emn13/YMvk9/
容器:
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*/
}
问题在于,如果容器具有固定的高度,例如100px,则固定的列将保持其默认高度,而不会附加到滚动条。
尝试添加一个额外的容器,您可以将其设置为相对位置。
div#container{
position:relative;
height:100px;
overflow:scroll;
}
您可以在下面的示例中看到固定行与其余行垂直滚动。
如果您不喜欢jQuery,那么可以采用以下另一种方法:
$('#tbl').scroll(function(e) {
var self = this;
$('.headcol').each(function() {
$(this).css({
'top': ($(this).index('.headcol') * $(this).outerHeight() + 3) - $(self).scrollTop()
});
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.