Fixed DIV at 100% width covers scrollbar

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/

There is a lot of things going on in your jsfiddle link. The reason the first table `select-customer-results` is covering the scrollbar of the other table `select-customer-results` is because the first table is set to be `position:fixed` and `top:-1px`. The second table is not given a specific position, and takes up the entire absolutely positioned parent div. I see you are trying to account for this with an empty div set to `height:37px`. This is not going to work. See @SidharthMudgal's answer below. — Morrowind789, Oct 08 '12 at 21:07

score 1 · Accepted Answer · edited Oct 08 '12 at 21:21

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.

Thank you, this works fine :) I will also take into consideration your suggestion on the duplicate ids. This was just a hack together to get it to work and I was going to refine the code later... Thanks again for your help! — Scott Hallauer, Oct 08 '12 at 21:20

score 0 · Answer 2 · answered Oct 08 '12 at 21:06

0

You need to take off position:fixed on he headers table. Further you also need to remove <div style='height:37px;'></div> as it adds unnecessary space after the header. Here's the updated fiddle.

answered Oct 08 '12 at 21:06

Sidharth Mudgal

4,234
19
25

Fixed DIV at 100% width covers scrollbar

HTML

CSS

Here is the example on jsfiddle:

2 Answers2