I'm trying to make a table with a fixed column, and i'm following this example:
http://jsfiddle.net/emn13/YMvk9/
Container:
div {
width: 600px;
overflow-x:scroll;
margin-left:5em;
overflow-y:visible;
padding-bottom:1px;
}
Fixed column:
.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*/
}
The problem is that if the container has a fixed height, say 100px, the fixed column keeps it's default height without getting attached to the scrollbar.
Try adding an extra container, which you can set to relative positioning.
div#container{
position:relative;
height:100px;
overflow:scroll;
}
You can see in the example below that the fixed rows scrolls vertically with the rest of the rows.
If you aren't averse to a little jQuery, here is another approach I worked out:
$('#tbl').scroll(function(e) {
var self = this;
$('.headcol').each(function() {
$(this).css({
'top': ($(this).index('.headcol') * $(this).outerHeight() + 3) - $(self).scrollTop()
});
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.