2

I have a table that is within a scrollable div window. The header is enclosed in a thead tag and the footer is in a separate tbody at the bottom. I need them to be fixed to the screen while maintaining their alignment/orientation.

I've tried 

position:absolute

and that skews everything.

See the following fiddle: http://jsfiddle.net/jkgt3wdm/

I am open to all suggestions.

EDIT: also needs to be able to scroll to the left and right.

danywigglebutt
  • 238
  • 1
  • 17

3 Answers3

3

After making sure that your footer is in a <tfoot>, you can fix it and the header at the top and bottom of the page with:

   position:fixed;

and then position the header at:

   top:0;

and the footer at:

   bottom:0;

Like this:

thead, tfoot {position:fixed;background-color:#000; color:#fff;}
thead {top:0; }
tfoot {bottom:0;}

You will still have to configure the widths of your <tbody> cells, but this should give you the sticky header and footer.

Is this what you are looking for: http://jsfiddle.net/jkgt3wdm/6/

Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
  • Can you provide some help with scrolling left and right? Also the maintaining the tbody's width inherited from thead and tfoot? If you can push in the right direction regarding that I will mark as top answer. – danywigglebutt Mar 11 '16 at 15:30
  • Are you using Bootstrap? If so, my solution may conflict with its CSS class styles. – Scott Marcus Mar 11 '16 at 15:42
  • I am indeed using bootstrap, but that shouldn't matter, right? the only issue is it does not maintain the alignment of cells in tbody... – danywigglebutt Mar 11 '16 at 15:46
  • Well, your table has the bootstrap class of `class=" table table-bordered table-responsive"` applied. So that makes me think the responsive part is fighting you. – Scott Marcus Mar 11 '16 at 16:07
0

To be honest, the easiest way to deal with that would be to use somethings that's already built. Messing with table is not always easy and if someone already found a foolproof way to do it, why not use it :)

I recommend using this: https://github.com/jmosbech/StickyTableHeaders

Xposedbones
  • 597
  • 4
  • 7
  • I'm messing with it now but am finding it difficult to inherit the width of the parent table when scrolling left/right. – danywigglebutt Mar 11 '16 at 15:18
  • The code is based on this stackoverflow question, http://stackoverflow.com/questions/1030043/html-table-headers-always-visible-at-top-of-window-when-viewing-a-large-table/1041566#1041566 – Xposedbones Mar 11 '16 at 15:28
-1

Check this out as a fast solution:

.header{
  width:100%;
  height:20px;
  background-color:blue;
}
.footer{
  width:100%;
  height:20px;
  background-color:green;
}
.content{

  overflow-y:auto;
}

http://jsfiddle.net/jkgt3wdm/7/

nullbyte
  • 59
  • 2
  • This does nothing but put elements at the top and bottom of the page and those elements scroll out of view. The OP wants the header and footer rows of the table to always be in view. – Scott Marcus Mar 11 '16 at 15:23