Fixed header and footer within table and div?

Question

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.

Answer 1

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/

Answer 2

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

Answer 3

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/