Question

This has been asked a zillion times: here, there, and the other place just on SO. Yet there’s no real good answer that I can find.

<recap> Often I have tables that are vertically much deeper than the viewport. I’d like to be able to scroll the table’s <tbody> while its <thead> remains fixed and visible. Some of these tables are also much wider than the viewport. Here I want the table’s <thead> to scroll horizontally.

To get the effect, I have dozens of lines of JS, including setInterval( ) calls to check scrollLeft and scrollTop, so that I can reposition a copy of <thead>¹. It works but it’s a huge, ungainly, frail and unmaintainable pain in the ass.</recap>

Question: Is there some straightforward css3 way, existent or emerging or proposed, that I can use to get a a table’s <thead> and <tbody> to scroll horizontally and vertically, yet independently of each other?
Thanks!

---

¹ Why setInterval( )? Because IE doesn’t uniformly deliver onScroll events, you silly; everybody knows that!

Answer 1

a dirty way would be to put the header table in a separate div like:

<div class="header">
<table>
    <thead><tr><td>#</td><td>v</td></tr></thead>
</table>
</div>

Then body in the another div like:

<div class="body">
    <table>
        <tbody>
            <tr><td>1</td><td>a</td></tr>
            <tr><td>1</td><td>a</td></tr>
            <tr><td>1</td><td>a</td></tr>
            <tr><td>1</td><td>a</td></tr>
            <tr><td>1</td><td>a</td></tr>         
    </tbody>
</table> 
</div>

Now you can give a fixed height to body div and set oveflow to auto. like:

table{border:0px solid #ccc;height:30px;}
table tr td{border:1px solid #ccc;padding:5px;}
div.body{height:70px;overflow:auto;border-bottom:1px solid #ccc;}

here is a working example I did in jsfiddle