[英]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.