title: How do i force a table row with 100% width to use a scroll bar if it's children are overflowing?
body: <p>I have a CSS layout problem. <a href="https://jsfiddle.net/jayseeare/gq68q7f7/" rel="nofollow">Here's a fiddle</a></p>
  
  <p>I want a header and footer on the page, with the "content" taking up the rest of the available space. I was doing it with a JQUery plugin that calculated and set the height of the relevant element, but it wasn't playing nicley with some knockout things i had going on on the page so I decided screw that and use CSS.</p>
  
  <p>Setting the sections to be table rows seemed to solve the problem of vertical expansion and the whole thing now nicley fills the page, but i have a table which is causing some issues.</p>
  
  <p>When it has data in it it expands the width of the columns (i don't want the text to wrap). And that means the width of my wrappers also expand (thanks tables) I can't seem to hang a scrollbar on anywhere to prevent it happening.</p>
  
  <p>My question is two fold:</p>
  
  <ol>
  <li>Is there a better way of achieving the header/footer thing?</li>
  <li>Can i get my scroll bar back?</li>
  </ol>
  
  <p>The ideal solution would be in CSS rather than using JavaScript. I must support all browsers, including IE down to IE 8, and preferably IE 7.</p>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;body&gt;
    &lt;div class="page-wrapper"&gt;
      &lt;div class="section-wrapper"&gt;
          &lt;P&gt;I want this at the top&lt;/P&gt;
      &lt;/div&gt;
      &lt;div class="content-section section-wrapper"&gt;
          &lt;P&gt;This is in the middle - taking up all the remaining space.&lt;/P&gt;
          &lt;P&gt;Making the wrapper a table-row solves the problem nicely...&lt;/P&gt;
          &lt;div class="table-wrapper"&gt;
            &lt;table&gt;
              &lt;thead&gt;...&lt;/thead&gt;
              &lt;tbody&gt;
                &lt;tr&gt;
                 But: In this table I have some data which causes the table to overflow the edge of the screen.
                &lt;/tr&gt;
                &lt;tr&gt;
                 How do I make it have a scroll bar instead?
                &lt;/tr&gt;
              &lt;/tbody&gt;
            &lt;/table&gt;
            &lt;p&gt;Ideally the scroll bar would go at the bottom of this section.&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="section-wrapper"&gt;
          &lt;P&gt;This goes at the bottom&lt;/P&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>body, html{
    width: 100%;
    height: 100%;
  }
  
  .page-wrapper{
    display: table;
    height: 100%;
  }
  
  .section-wrapper{
    display: table-row;
    width: 100%;
    background-color: lightGrey;
  }
  
  .content-section.section-wrapper{
    height: 100%;
    background-color: white;
  }
  
  table{
    white-space: nowrap;
    border-spacing: 20px 0;
    border-collapse: separate;
  }
  
  .table-wrapper{
    overflow: auto;
    display: inline-block;
    }
  </code></pre>