DIV scrollbar disappears when child has 100% width in IE7

I have a nested set of DIVs, which ultimately contain a table. I want the table to occupy the entire width of the DIVs (an arbitrary number) except for the space taken up by a vertical scrollbar, and I only want to have to set the width for the entire structure in one place (the reason why is posted below the code).

The issue I'm having is that when the table fills the entire content-area of its parent (whether by using width: 100% or hard-coding the width in), the vertical scrollbar of the DIV containing it disappears. If the table's width is less than the total content area, but more than the content area minus the scrollbar width, I get both horizontal and vertical scrollbars (even though the vertical scrollbar is outside the content area). If the table width is less than the content area minus the scrollbar width, everything displays correctly.

The code also displays correctly in both IE6 and FireFox, in all cases mentioned above. Only IE7 has a problem.

DOCTYPE:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

CSS:


.scrollingtable { 
 overflow: show; 
 position:relative; 
 width: 1000px; 
} 
.inner { 
 overflow:auto; 
 height:9.6em; 
 background-color:red; 
 padding-right:100px; 
} .scrollingtable table { 
 width:100%; 
 background-color:green; 
}

HTML:


 <div class="scrollingtable"> 
 <div class="inner"> 
  <table summary="This table lists flights arriving at Bristol International Airport." cellspacing="0" cellpadding="0"> 
  <thead> 
   <tr> 
   <th scope="col" class="first"> 
    Test</th> 
   <th scope="col"> 
    test</th> 
   <th scope="col"> 
    test</th> 
   <th scope="col"> 
    test</th> 
   <th scope="col" class="last"> 
    test</th> 
   </tr> 
  </thead> 
  <tfoot> 
   <tr> 
   <th scope="col" class="first"> 
    test</th> 
   <th scope="col"> 
    test</th> 
   <th scope="col"> 
    test</th> 
   <th scope="col"> 
    test</th> 
   <th scope="col" class="last"> 
    test</th> 
   </tr> 
  </tfoot> 
  <tbody> 
   <tr> 
   <td> 
    test</td> 
   <td> 
    test</td> 
   <td> 
    test</td> 
   <td> 
    test</td> 
   <td> 
    test</td> 
   </tr> 
   <tr class="alt"> 
   <td> 
    test</td> 
   <td> 
    test</td> 
   <td> 
    test</td> 
   <td> 
    test</td> 
   <td> 
    test</td> 
   </tr> 
   <tr> 
   <td> 
    test</td> 
   <td> 
    test</td> 
   <td> 
    test</td> 
   <td> 
    test</td> 
   <td> 
    test</td> 
   </tr> 
   <tr class="alt"> 
   <td> 
    test</td> 
   <td> 
    test</td> 
   <td> 
    test</td> 
   <td> 
    test</td> 
   <td> 
    test</td> 
   </tr> 
   <tr> 
   <td> 
    test</td> 
   <td> 
    test</td> 
   <td> 
    test</td> 
   <td> 
    test</td> 
   <td> 
    test</td> 
   </tr> 
   <tr class="alt"> 
   <td> 
    test</td> 
   <td> 
    test</td> 
   <td> 
    test</td> 
   <td> 
    test</td> 
   <td> 
    test</td> 
   </tr> 
   <tr> 
   <td> 
    test</td> 
   <td> 
    test</td> 
   <td> 
    test</td> 
   <td> 
    test</td> 
   <td> 
    test</td> 
   </tr> 
   <tr class="alt"> 
   <td> 
    test</td> 
   <td> 
    test</td> 
   <td> 
    test</td> 
   <td> 
    test</td> 
   <td> 
    test</td> 
   </tr> 
  </tbody> 
  </table> 
 </div> 
 </div>

I'm working on adapting a scrolling table example by Stu Nicholls into an Asp.Net control. The original example used hardcoded widths for the table and containing DIV, but ideally I'd like to be able to set the width exactly once.

The nesting of the additional outer/inner DIV is necessary for other traits of the table, such as stationary headers and footers (omitted here for clarity).

DIV scrollbar disappears when child has 100% width in IE7

ASiebersma

ASiebersma

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week