css only - Table overflow with fixed header

Question

I am trying to build a table which is scrollable in the x and y directions if the content is bigger than the container. I also want the header to always be visible at the top. I've got the first part working, and the header is always visible at the top, however the header column sizes do not match up with the table table sizes.

I've created this fiddle:

http://jsfiddle.net/xxQQS/1/

I am after a CSS only solution.

EDIT: There seem to be a quite a few people who seem to think that this cannot only be done with CSS. This may be true, however please don't just post to say 'no this can't be done'. If you can explain why this can't be done without CSS I'll accept your answer.

Salman Arshad · Accepted Answer · 2012-03-21 09:42:27Z

2

Create a clone of your table. For the first table, hide all rows except the headers using visibility: hidden. Hide the header of the other table using visibility: hidden. Place your tables inside divs with overflow properties set as follows:

<div style="overflow-x: hidden; width: 400px;">
    <div style="overflow-y: hidden; height: 20px;">
        <table id="head-only">
        </table>
    </div>
    <div style="overflow-y: scroll; height: 100px;">
        <table id="body-only">
        </table>
    </div>
</div>

answered Mar 21, 2012 at 9:42

Salman Arshad

274k85 gold badges450 silver badges540 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Markus A. Over a year ago

There's a problem with this solution: If the table overflows horizontally and vertically, you need to scroll horizontally all the way to the right to reach the vertical scroll bar.

sandeep · Accepted Answer · 2012-03-20 17:59:30Z

0

May be for this you have to use JS. Check this http://www.tablefixedheader.com/

answered Mar 20, 2012 at 17:59

sandeep

93.2k24 gold badges140 silver badges156 bronze badges

Comments

samuellawrentz · Accepted Answer · 2019-01-02 09:53:48Z

0

I too was searching for a solution for sticky headers to use it in my site. Finally found a Jquery plugin that seamlessly does this sticky header part. https://github.com/jmosbech/StickyTableHeaders

You need not add any CSS, the plugin takes care of it. It clones the table header during scroll. Initialization is pretty simple

$('table').stickyTableHeaders();

Hope this helps :) As told in other answers, this cannot be achieved purely through CSS I guess.

answered Jan 2, 2019 at 9:53

samuellawrentz

1,73214 silver badges23 bronze badges

Collectives™ on Stack Overflow

css only - Table overflow with fixed header

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related