CSS-Based Table Header Position Fixed

Create a scrollable table with fixed position header. The entire scrollable table still flows with the rest of the page content. The header fixed positioning is relative to the scrollable container.

by kpowz

HTML

<div id=myAppFooGrid class="myAppFooGrid Scrollable">
<div class="ScrollArea">
<table cellspacing=0 cellpadding=0>
    <col style="width:50px;background-color:#fee">
    <thead>
        <tr class=Fixable>
            <th><span class=fix>Foo</span></th>
            <th><span class=fix>Foo</span></th>
            <th><span class=fix>Foo</span></th>
        </tr>
    </thead>
<tbody>
    <tr><td>bar 3</td><td>bar 4</td><td>bar 5</td></tr>
    <tr><td>bar 4</td><td>bar 5</td><td>bar 6</td></tr>
    <tr><td>bar 5</td><td>bar 6</td><td>bar 7</td></tr>
    <tr><td>bar 6</td><td>bar 7</td><td>bar 8</td></tr>
    <tr><td>bar 7</td><td>bar 8</td><td>bar 9</td></tr>
    <tr><td>bar 8</td><td>bar 9</td><td>bar 10</td></tr>
    <tr><td>bar 9</td><td>bar 10</td><td>bar 11</td></tr>
    <tr><td>bar 11</td><td>bar 12</td><td>bar 13</td></tr>
    <tr><td>bar 12</td><td>bar 13</td><td>bar 14</td></tr>
    <tr><td>bar 13</td><td>bar 14</td><td>bar 15</td></tr>
    <tr><td>bar 14</td><td>bar 15</td><td>bar 16</td></tr>
    <tr><td>bar 15</td><td>bar 16</td><td>bar 17</td></tr>
    <tr><td>bar 16</td><td>bar 17</td><td>bar 18</td></tr>
    <tr><td>bar 17</td><td>bar 18</td><td>bar 19</td></tr>
    <tr><td>bar 18</td><td>bar 19</td><td>bar 20</td></tr>
    <tr><td>bar 19</td><td>bar 20</td><td>bar 21</td></tr>
    <tr><td>bar 21</td><td>bar 22</td><td>bar 23</td></tr>
    <tr><td>bar 22</td><td>bar 23</td><td>bar 24</td></tr>
    <tr><td>bar 23</td><td>bar 24</td><td>bar 25</td></tr>
    <tr><td>bar 24</td><td>bar 25</td><td>bar 26</td></tr>
    <tr><td>bar 25</td><td>bar 26</td><td>bar 27</td></tr>
    <tr><td>bar 26</td><td>bar 27</td><td>bar 28</td></tr>
    <tr><td>bar 27</td><td>bar 28</td><td>bar 29</td></tr>
    <tr><td>bar 28</td><td>bar 29</td><td>bar 30</td></tr>
    <tr><td>bar 29</td><td>bar 30</td><td>bar 31</td></tr>
    <tr><td>bar 31</td><td>bar 32</td><td>bar 33</td></tr>
    <tr><td>bar 32</td><td>bar 33</td><td>bar 34</td></tr>
    <tr><td>bar 33</td><td>bar...

CSS

/*Framework*/
.Scrollable{
    position:relative;
}
.ScrollArea{
    /*Make this box scroll*/
    overflow:auto;
}
.Fixable .fix{
    position:absolute; /*Escape the scrolling context*/
}

/*App Specific*/
.myAppFooGrid .ScrollArea{
    /*Give it a fixed size so it can scroll. Could also set using JS*/
    height:200px; 
   /* width:80%; */
}
.myAppFooGrid table{
    table-layout:auto;
}

.myAppFooGrid{
    /*Leave room for the header area*/
    padding-top:1.5em; /* may be a tough one along with needed spans around th content*/
    /*TODO: Set a background image to make it look like there's a fixed row*/
}

.myAppFooGrid thead .fix{
    /*Move above the scroll area into the fake header*/
    top:0; /*Must absolutely position the top to avoid bugs in Firefox and IE6*/
    height:1.5em;
    line-height:1.5em;
}

/* DEBUG */
col{
    /*Transition the column width changes to expose how the workaround works*/
    -webkit-transition:width 0.5s ease-out;
    -moz-transition:width 0.5s ease-out;
}