Sticky td-column without external div

Question

This is again one of these old issues: I would like to make the four first columns of my HTML-Table sticky (only horizontally).

There are several solutions out there which work properly if it's a smaller table. Unfortunately mine has a big size and I would like it to spread it over the whole screen. Therefore most solutions which pack the table in a scrollable div are no use because they put the scrollbar at the very end of the div - which is quite a distance to go down.

Also there is some small content over the table so it's yet not 100% of the screen...

There were some ideas around the Internet to give the frozen tds the position: absolute; attribute which didn't work for me.

http://www.fixedheadertable.com/ seems kinda fine - unfortunately till now it just messes up my table...

EDIT 1: It's a pretty huge table which displays a database and does some calculation with its values. That's one of my problems: It always has the same amount of columns (about 50) but the number of rows vary. But in general the table is kinda straight-forward with no surprises:

<table id="calctbl">
    <thead class="fixed">
        <tr id="table-head">
            <th class="several classes">Number<br>
                <br>Pos. Nr.</th>                        
            <th class="several classes">Info 1</th>
            <th class="several classes"><div>More infos</div></th>
            <th class="several classes">Here<br>are some more<br>infos</th>
            <th>... and it goes on ...</th>
        </tr>
</thead><tbody>
    <tr>
        <td class="several other classes">vals...</td>                        
        <td class="several other classes">more vals</td>
        <td class="several classes"><div>and some more</div></td>
        <td class="several other classes">...</td>
        <td>... and it goes on ...</td>
    </tr>
    <tr>
        <!-- No big surprises, it just goes on -->
    </tr>
</tbody>
</table>

Also I use this for the first header line: HTML table with fixed headers?

EDIT 2:

http://www.fixedheadertable.com/ - there is not really an explanation and for some reason it just messes everything up
http://tympanus.net/codrops/2014/01/09/sticky-table-headers-columns/ Has the mentioned problem: It requires a limiting div around it
how do I create an HTML table with fixed/frozen left column and scrollable body? Answer #1: Same problem with the div
position: fixed - doesn't work at all for me
How can I make the first and second column of a table sticky Answer #1 - dosen't work either
http://massless.org/_tests/grid1/ - seems to be quite old and requires a div
http://learndevelopingmyway.blogspot.co.at/2012/03/sticky-columnsheaders-freeze-pane-in.html is this even a table?

What have you tried so far? Do you have some code for us to look at? If you follow @AshishBalchandani, you may need to use a different service than jsFiddle because that website appears to be down at the moment. — Jason, Aug 06 '14 at 16:18
You want the left columns to stay while the rest of the table scrolls horizontally? http://codepen.io/anon/pen/Ctzmw — Tank, Aug 06 '14 at 17:00
@Tank: Almost - I want to be able to scroll horizontally with the scroll bar of the window, NOT with the scroll bar of the table (or, as said before div). If the number of rows increases the scroll-bar of the table moves down as well - and scrolling with the window-bar has no effect on the content.. — Qohelet, Aug 06 '14 at 19:43
http://stackoverflow.com/a/1101015/2516892 Solved all my problems in the best possible way — Qohelet, Aug 07 '14 at 13:25

ondObno · Answer 1 · 2014-08-07T07:26:46.650

0

According to my experience, fixedheadertable works just fine. Try to play with your css, especially container div's max-height and other height-related properties to limit it's size for big tables. It would be easier if you could show your table, but if I understood correctly, this css could help:

.fht-tbody{
  max-height: 300px;
}

You can test this easily if using some inspector in your browser (i.e. firebug) on the original page (http://www.fixedheadertable.com/) by targeting the .fht-tbody and setting the above value.

edited Aug 07 '14 at 07:26

answered Aug 06 '14 at 16:23

ondObno

91
5

Do you have a working example? Also, as said, there is no div-container around it – Qohelet Aug 06 '14 at 16:29
After calling fixedheadtable, it would put your table in two divs, header and body, and one of them will get a class fht-body. – ondObno Aug 06 '14 at 17:06
But this doesn't solve my problem: I am not able to scroll the table with the scroll-bar of the window (which is always at the bottom of the window), it makes it necessary to scroll with the bar of the div, which is unfortunately at the bottom of the page... – Qohelet Aug 06 '14 at 19:44
I see, so you have to scroll vertically first, to be able to use horizontal scroll? But max-height of the mentioned div should keep it limited. Try to set it fixed to let say 300px to check if this would work. At my side it helped. – ondObno Aug 07 '14 at 06:38
I have thought of that too already... But as said the table has about the triple size of the width of the screen (with a widescreen) and about the hight it's the double right now (in future - more) so by packing it in any container the usability would suffer... – Qohelet Aug 07 '14 at 08:40

Sticky td-column without external div

1 Answers1