Hi all,
is there a way to freeze the header of a table in Mozilla using css so that it works with the horizontal scroll bar.
I've seen solutions that can freeze the header when scrolling up and down but when scrolling sideways the header titles don't match the columns. I need the header to match the colums.
I'd like to avoid using javascript but if there is no css solution I might just have to. Please let me know.
Thank you,
Nik...I've seen solutions that can freeze the header when scrolling up and down...You have? Where? As you can see from my post this afternoon: <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?t=108597">http://www.webdeveloper.com/forum/showt ... p?t=108597</a><!-- m --> I'm having problems with doing this very thing.
The only solutions I have seen seem to invlove using two different tables, which only works if you set very specific matching column widths in the both tables. Not real workable when you need to have the columns dynmically resize based on their content.<!-- m --><a class="postlink" href="http://web.tampabay.rr.com/bmerkey/examples/nonscroll-table-header.html">http://web.tampabay.rr.com/bmerkey/exam ... eader.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.litotes.demon.co.uk/example_scripts/tableScroll.html">http://www.litotes.demon.co.uk/example_ ... croll.html</a><!-- m -->
one link is an example of scrolling using css (works for both IE and Moz) and the other is an example using javascript (again for IE and Moz). the css example only woks with a header when you scroll up and down. the js example works well whichever direction you scroll. the only problem is that the script is quite large. i was hoping that someone had a similar solution using css, but so far it doesn't look like that is the case.I think I've figured out a CSS solution (IE and Firefox) that works for myself for a vertical scroll bar and should work for a horizontal scroll bar as well with a couple of minor changes.
Go here: <!-- m --><a class="postlink" href="http://www.stansight.com/LockTableHead5.html">http://www.stansight.com/LockTableHead5.html</a><!-- m --> (Discussed in the webdeveloper thread <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?t=108597">http://www.webdeveloper.com/forum/showt ... p?t=108597</a><!-- m --> )
A simple change to the source to make " overflow-x:hidden" be " overflow-x:auto" in the scrollContent and div.TableContainer classes should enable the horizontal scrollbar.
Hope it works out for you.Hi I tried implemented the code for horizontal and vertical scrolling given in the link <!-- m --><a class="postlink" href="http://www.litotes.demon.co.uk/example_scripts/tableScroll.html">http://www.litotes.demon.co.uk/example_ ... croll.html</a><!-- m --> in a simple table. But the header above the fixed columns are not visible. Is there any solution for this bcas I want the full header to be displayed.
Thanks.Hi I tried implemented the code for horizontal and vertical scrolling given in the link <!-- m --><a class="postlink" href="http://www.litotes.demon.co.uk/exam...ableScroll.html">http://www.litotes.demon.co.uk/exam...ableScroll.html</a><!-- m --> in a simple table. But the header above the fixed columns are not visible. Is there any solution for this bcas I want the full header to be displayed.
Thanks.
is there a way to freeze the header of a table in Mozilla using css so that it works with the horizontal scroll bar.
I've seen solutions that can freeze the header when scrolling up and down but when scrolling sideways the header titles don't match the columns. I need the header to match the colums.
I'd like to avoid using javascript but if there is no css solution I might just have to. Please let me know.
Thank you,
Nik...I've seen solutions that can freeze the header when scrolling up and down...You have? Where? As you can see from my post this afternoon: <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?t=108597">http://www.webdeveloper.com/forum/showt ... p?t=108597</a><!-- m --> I'm having problems with doing this very thing.
The only solutions I have seen seem to invlove using two different tables, which only works if you set very specific matching column widths in the both tables. Not real workable when you need to have the columns dynmically resize based on their content.<!-- m --><a class="postlink" href="http://web.tampabay.rr.com/bmerkey/examples/nonscroll-table-header.html">http://web.tampabay.rr.com/bmerkey/exam ... eader.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.litotes.demon.co.uk/example_scripts/tableScroll.html">http://www.litotes.demon.co.uk/example_ ... croll.html</a><!-- m -->
one link is an example of scrolling using css (works for both IE and Moz) and the other is an example using javascript (again for IE and Moz). the css example only woks with a header when you scroll up and down. the js example works well whichever direction you scroll. the only problem is that the script is quite large. i was hoping that someone had a similar solution using css, but so far it doesn't look like that is the case.I think I've figured out a CSS solution (IE and Firefox) that works for myself for a vertical scroll bar and should work for a horizontal scroll bar as well with a couple of minor changes.
Go here: <!-- m --><a class="postlink" href="http://www.stansight.com/LockTableHead5.html">http://www.stansight.com/LockTableHead5.html</a><!-- m --> (Discussed in the webdeveloper thread <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?t=108597">http://www.webdeveloper.com/forum/showt ... p?t=108597</a><!-- m --> )
A simple change to the source to make " overflow-x:hidden" be " overflow-x:auto" in the scrollContent and div.TableContainer classes should enable the horizontal scrollbar.
Hope it works out for you.Hi I tried implemented the code for horizontal and vertical scrolling given in the link <!-- m --><a class="postlink" href="http://www.litotes.demon.co.uk/example_scripts/tableScroll.html">http://www.litotes.demon.co.uk/example_ ... croll.html</a><!-- m --> in a simple table. But the header above the fixed columns are not visible. Is there any solution for this bcas I want the full header to be displayed.
Thanks.Hi I tried implemented the code for horizontal and vertical scrolling given in the link <!-- m --><a class="postlink" href="http://www.litotes.demon.co.uk/exam...ableScroll.html">http://www.litotes.demon.co.uk/exam...ableScroll.html</a><!-- m --> in a simple table. But the header above the fixed columns are not visible. Is there any solution for this bcas I want the full header to be displayed.
Thanks.