Question

I have a page with a div containing a large table of data. The div has the overflow values of overflow-x:hidden;overflow-y:scroll; Instead of the page scrolling you just scroll using this div’s scrollbar. However the table header (thead) is fixed and stays at the top of the div when you scroll, but it covers the scrollbar.

I want the table header to be 100% of the div with the scrollbar but I want it to act like the rest of the table and not cover the scrollbar.

I have tested this in Chrome, Firefox and IE9 and they all look the same!

HTML

 <div style='position:absolute;bottom:0;height:396px;width:100%;overflow-y:scroll;overflow-x:hidden;'>
  <table id='select-customer-results' style='margin-top:-1px;position:fixed;width:100%;'>
   <tr>
    <th style='width:15%;'>Code</th>
    <th style='width:85%;'>Name</th>
   </tr>
   </table>
   <div style='height:37px;'></div>
   <table id='select-customer-results'>
    <!--A lot of rows!-->
   </table>
  </div>

​

CSS

table#select-customer-results{
 width:100%;
 margin-top:-5px;
}
table#select-customer-results tr{
 border-bottom:1px solid #797979;
}
table#select-customer-results tr:nth-child(even){
 background:#EBF2F7;
}
table#select-customer-results td,table#select-customer-results th{
 font-family:Helvetica, Arial, sans-serif;
 padding:5px;
 border:1px solid #797979; 
}
table#select-customer-results td{
 cursor:pointer; 
}
table#select-customer-results tr.clickable:hover{
 background-color:#BCC2C6;
}
table#select-customer-results th{
 color:#FFF;
 padding:7px;
 padding-top:10px;
 font-weight:bold;
 text-align:left;
 box-shadow:0 2px 3px 0 #474747;
 -webkit-box-shadow:0 2px 3px 0 #474747;
 -moz-box-shadow:0 2px 3px 0 #474747;
 background: #878787;
 background: -moz-linear-gradient(top,  #878787 0%, #6E6E6E 50%, #5C5C5C 51%, #7B7B7B 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#878787), color-stop(50%,#6E6E6E), color-stop(51%,#5C5C5C), color-stop(100%,#7B7B7B));
 background: -webkit-linear-gradient(top,  #878787 0%,#6E6E6E 50%,#5C5C5C 51%,#7B7B7B 100%);
 background: -o-linear-gradient(top,  #878787 0%,#6E6E6E 50%,#5C5C5C 51%,#7B7B7B 100%);
 background: -ms-linear-gradient(top,  #878787 0%,#6E6E6E 50%,#5C5C5C 51%,#7B7B7B 100%);
 background: linear-gradient(to bottom,  #878787 0%,#6E6E6E 50%,#5C5C5C 51%,#7B7B7B 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#878787', endColorstr='#7B7B7B',GradientType=0 );
}​

Here is the example on jsfiddle:

http://jsfiddle.net/Q3sbp/

Answer 1

There are a few problems I noted with your code. Firstly, it isn’t semantic. The whole point of th tags is for it to be machine-readable, but you’ve split up your table so that your ths are for a table with no content, and the table that has content has no header.
Another issue is that you’re using the same id for both tables. The id attribute is supposed to uniquely define an element. If you want to apply the same style to both tables, you should give them a class.

Those bits aside, let’s look at some solutions. The first idea I had would be setting a negative margin on the th table, such that it appears outside the div (above it, to be precise). However, this doesn’t work because the whole point of the div is to have its overflow-y set to scroll. Therefore, what you should do is move the table’s code outside of the div.

Here’s what it would look like, on JSFiddle.

I changed the code up just a bit. I got rid of the strange height: 35px div in there, and also removed the absolute positioning. It wouldn’t be hard to absolute position both such that they line up.