CODEWITHSUNDEEP
javascriptjqueryhtmlcss
danywigglebutt
danywigglebutt

Reputation: 269

Fixed header and footer within table and div?

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.

Upvotes: 2

Views: 3493

Answers (3)

Scott Marcus
Scott Marcus

Reputation: 65806

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/

Upvotes: 3

nullbyte
nullbyte

Reputation: 59

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/

Upvotes: -1

Xposedbones
Xposedbones

Reputation: 597

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

Upvotes: 0

Related Questions