4

I'm trying to freeze the THEAD section of my table so that as I scroll, the THEAD is always visible. I've accomplished this by attaching an event handler to the scroll event in jQuery which sets the top position of the THEAD to the scroll offset:

$(".scroll").scroll(function () {
    $("#header thead").css({"top": ($(".scroll").scrollTop()) + "px"});
});

You can see it in action at this FIDDLE

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
ciaoben
  • 107
  • 11
  • 2
    Not with `CSS` alone, because it's for styling, there's no way to detect the scroll position, that's why you need Javascript, to detect when there was a scroll of a certain amount. – Nick R Jan 30 '14 at 14:39
  • possible duplicate of [CSS-Only Scrollable Table with fixed headers](http://stackoverflow.com/questions/11891065/css-only-scrollable-table-with-fixed-headers) – gpgekko Jan 30 '14 at 14:39
  • can you elaborate what is it you want to achieve ? I don't really get what you mean by "header refreshing every time i scroll" – AzDesign Jan 30 '14 at 14:39
  • He wants to freeze his headers to the top of the page. – crush Jan 30 '14 at 14:40
  • 1
    don't use thead, use a div as table header, set it fixed on top/absolute top againts a container while the table has top-padding as much as the height of the header – AzDesign Jan 30 '14 at 14:41
  • 1
    Unfortunately the only really good CSS solution is a ways off: http://charliepark.org/css-only-sticky-headers/ – Mister Epic Jan 30 '14 at 14:50
  • could you please show me an example of that in my fiddle – ciaoben Jan 30 '14 at 14:51

1 Answers1

0

The ugliest alternate solution, at least no js and supported by most browser (no css3). Jsfiddle basically it duplicate the table, set the 1st table header only visible on top of 2nd table. The drawback is, because it is using fixed position, it wont scroll horizontally as the the table did. Maybe if you set the table width as same as window width, it should work properly. Just an alternative

AzDesign
  • 1,169
  • 1
  • 8
  • 18
  • ty for the comment... but the horizontal scroll of the header in this way doesn't seem to work – ciaoben Jan 30 '14 at 15:13
  • Yes, it has fixed position against browser window. try resize the js fiddle into wider screen or re size the table to fit browser window. I'm using 1920px width monitor and if I stretch jsfiddle window to its widest width, all data is properly displayed without the need of horizontal scrolling – AzDesign Jan 30 '14 at 15:15
  • yes but i need that when i see on little monitor, it could be seen correctly, even with the horizontal overflow bar – ciaoben Jan 30 '14 at 15:21
  • Then using some js is your only solution. There are many good jquery plugin or js snippet you can find in google. They're also does not modify content (like I did with duplicating table) – AzDesign Jan 30 '14 at 15:31
  • i've tried to search but all i found it seems to fix the header to the top of the page.. not of a div... anyway ty for your answers! – ciaoben Jan 30 '14 at 15:39