Mottie/tablesorter

Sticky Headers with stickiness at the top of the parent div

PanzP opened this issue · 8 comments

PanzP commented

I have a table that is nested in a hierarchy of divs because of the complex layout of my web app. I'd like the table header to stick to the top of its parent div, and not the browser window.

PanzP commented

/* Here's a simple structure where the table is nested in a container, and has to live in a space bound by a header, a footer, and an aside. Given that typical context, StickyHeaders doesn't work: As it resorts to default "fixed" positioning for the thead, it only understands the top of the as the boudary to stick to. To be really universal, the feature should by default stick to its parent container's top edge; I would think. I'm new to GitHub and I'm not sure how to post code, please look at the underlying markup to see how this table is laid out in the window, along with its siblings. */

<body style="margin:0;">
   <header style="background-color: #dedede; position:absolute; height:48px; top:0; right:0; left:0;">
   </header>
      <section style="background-color: #bebebe; position:absolute; top:48px; right:0; bottom:32px; left:0;">
         <aside style="background-color: #f0f0f0; position:absolute; top:0; right:250px; bottom:0; left:0;">
         </aside>
         <div id="tableContainer" style="position:absolute; top:0; right:0; bottom:0; left:250px; overflow:auto;">
            <table id="myTable" class=""tablesorter" style="border:none; margin:0; left:0;">
               <thdead>
                  <tr><th>Column A</th><th>Column B</th><th>Column C</th><th>Column D</th></tr>
               </thead>
               <tbody>
                  <tr><td>ABCDEF</td><td>AB</td><td>A</td><td>ABCDFEGHIJK</td></td>
                  <tr><td>ABCD</td><td>ABCD</td><td>AB</td><td>ABCDFEGH</td></td>
                  <tr><td>ABCDEF</td><td>ABC</td><td>AB</td><td>ABCDFEGH</td></td>
                  <tr><td>ABCDEF</td><td>ABC</td><td>AB</td><td>ABCDFEGH</td></td>
                  <tr><td>ABCDEF</td><td>ABC</td><td>AB</td><td>ABCDFEGH</td></td>
                  <tr><td>ABCDEF</td><td>ABC</td><td>ABC</td><td>ABCDFEGH</td></td>
                  <tr><td>ABCDEF</td><td>ABC</td><td>AB</td><td>ABCDFEGH</td></td>
                  <tr><td>ABCDEF</td><td>ABC</td><td>AB</td><td>ABCDFEGH</td></td>
                  <tr><td>ABCDEF</td><td>ABC</td><td>AB</td><td>ABCDF</td></td>
                  <tr><td>ABCDEF</td><td>ABC</td><td>AB</td><td>ABCDFEGH</td></td>
                  <tr><td>ABCDEF</td><td>ABC</td><td>AB</td><td>ABCDFEGH</td></td>
                  <tr><td>ABCDEF</td><td>ABC</td><td>AB</td><td>ABCDFEGH</td></td>
                  <tr><td>ABCDEF</td><td>ABC</td><td>AB</td><td>ABCDFEGH</td></td>
                  <tr><td>ABCDEF</td><td>ABC</td><td>AB</td><td>ABCDFEGH</td></td>
                  <tr><td>ABCDEF</td><td>ABC</td><td>AB</td><td>ABCDFEGH</td></td>
                  <tr><td>ABCDEF</td><td>ABC</td><td>AB</td><td>ABCDFEGH</td></td>
                  <tr><td>ABCDEF</td><td>ABC</td><td>AB</td><td>ABCDFEGH</td></td>
                  <tr><td>ABCDEF</td><td>ABC</td><td>AB</td><td>ABCDFEGH</td></td>
                  <tr><td>ABCDEF</td><td>ABC</td><td>AB</td><td>ABCDFEGH</td></td>
                  <tr><td>ABCDEF</td><td>ABC</td><td>AB</td><td>ABCDFEGH</td></td>
                  <tr><td>ABCDEF</td><td>ABC</td><td>AB</td><td>ABCDFEGH</td></td>
                  <tr><td>ABCDEF</td><td>ABC</td><td>AB</td><td>ABCDFEGH</td></td>
                  <tr><td>ABCDEF</td><td>ABC</td><td>AB</td><td>ABCDFEGH</td></td>
                  <tr><td>ABCDEF</td><td>ABC</td><td>AB</td><td>ABCDFEGH</td></td>
                  <tr><td>ABCDEF</td><td>ABC</td><td>AB</td><td>ABCDFEGH</td></td>
                  <tr><td>ABCDEF</td><td>ABC</td><td>AB</td><td>ABCDFEGH</td></td>
                  <tr><td>ABCDEF</td><td>ABC</td><td>AB</td><td>ABCDFEGH</td></td>
                  <tr><td>ABCDEF</td><td>ABC</td><td>AB</td><td>ABCDFEGH</td></td>
                  <tr><td>ABCDEF</td><td>ABC</td><td>AB</td><td>ABCDFEGH</td></td>
                  <tr><td>ABCDEF</td><td>ABC</td><td>AB</td><td>ABCDFEGH</td></td>
                  <tr><td>ABCDEF</td><td>ABC</td><td>AB</td><td>ABCDFEGH</td></td>
                  <tr><td>ABCDEF</td><td>ABC</td><td>AB</td><td>ABCDFEGH</td></td>
                  <tr><td>ABCDEF</td><td>ABC</td><td>AB</td><td>ABCDFEGH</td></td>
               </tbody>
            </table>
         </div>
      </section>
   <footer style="background-color: #a2a2a2; position:absolute; height:32px; right:0; bottom:0; left:0;">
   </footer>
</body>
Mottie commented

Hi @PanzP!

Yep, I'll need to update the stickyHeader widget to make this work... I'm on it!

PanzP commented

You da man :D

Mottie commented

This turned out to a bit more complicated than I had time for while working on v2.10.0. So, I'll try to work on it when I have time and try to push it out in the next update. Thanks for your patience!

Deleted user commented

Any update on this?

Mottie commented

Eek, yeah I know 6 months and I haven't finished it... sorry I've been so busy with catching up after my sabbatical that I haven't gotten around to this, sorry. I'll see what I can do.

Bitmambo commented

THUMBS UP

Mottie commented

Hmm, there is still an issue with the sticky header not positioning correctly inside the tab... I will have this fixed in the next update.