title: Fixed header table with horizontal scrollbar and vertical scrollbar on
body: <p>I have been trying to figure out this problem i have with html/css sticky header + scrollbars. We are creating a program that requires scrollbars to show up once the containersize reaches a certain point(depending on resolution of the user). </p>
  
  <p>I am forcing a min-width on the second column in the table, so the table stops decreasing at a certain point and forces the container to stay at a certain width. The overflow on the container shows the horizontal scrollbar. Everything works fine. Once i add a second scrollbar for the vertical scrolling, things are getting messed up. Does someone have a solution for this problem? I want to have a vertical scrollbar on the .table-body, but the scrollbar must be visible on the outercontainer.</p>
  
  <p>Is there a good html/css solution for fixed header tables? I have been searching for a week, but can only find jQuery plugins for this kind of behaviour.</p>
  
  <p>This is my current HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;fixed header prototyping&lt;/title&gt;
      &lt;link rel="stylesheet" href="css/style.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div class="outer-container"&gt; &lt;!-- absolute positioned container --&gt;
  &lt;div class="inner-container"&gt;
  
      &lt;div class="table-header"&gt;
          &lt;table id="headertable" width="100%" cellpadding="0" cellspacing="0"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th class="header-cell col1"&gt;One&lt;/th&gt;
                      &lt;th class="header-cell col2"&gt;Two&lt;/th&gt;
                      &lt;th class="header-cell col3"&gt;Three&lt;/th&gt;
                      &lt;th class="header-cell col4"&gt;Four&lt;/th&gt;
                      &lt;th class="header-cell col5"&gt;Five&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  
      &lt;div class="table-body"&gt;
          &lt;table id="bodytable" width="100%" cellpadding="0" cellspacing="0"&gt;
              &lt;tbody&gt;
                  &lt;tr&gt;
                      &lt;td class="body-cell col1"&gt;body row1&lt;/td&gt;
                      &lt;td class="body-cell col2"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col3"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col4"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col5"&gt;body row2 en nog meer&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="body-cell col1"&gt;body row1&lt;/td&gt;
                      &lt;td class="body-cell col2"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col3"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col4"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col5"&gt;body row2 en nog meer&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="body-cell col1"&gt;body row1&lt;/td&gt;
                      &lt;td class="body-cell col2"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col3"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col4"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col5"&gt;body row2 en nog meer&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="body-cell col1"&gt;body row1&lt;/td&gt;
                      &lt;td class="body-cell col2"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col3"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col4"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col5"&gt;body row2 en nog meer&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="body-cell col1"&gt;body row1&lt;/td&gt;
                      &lt;td class="body-cell col2"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col3"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col4"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col5"&gt;body row2 en nog meer&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="body-cell col1"&gt;body row1&lt;/td&gt;
                      &lt;td class="body-cell col2"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col3"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col4"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col5"&gt;body row2 en nog meer&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="body-cell col1"&gt;body row1&lt;/td&gt;
                      &lt;td class="body-cell col2"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col3"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col4"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col5"&gt;body row2 en nog meer&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="body-cell col1"&gt;body row1&lt;/td&gt;
                      &lt;td class="body-cell col2"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col3"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col4"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col5"&gt;body row2 en nog meer&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="body-cell col1"&gt;body row1&lt;/td&gt;
                      &lt;td class="body-cell col2"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col3"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col4"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col5"&gt;body row2 en nog meer&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="body-cell col1"&gt;body row1&lt;/td&gt;
                      &lt;td class="body-cell col2"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col3"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col4"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col5"&gt;body row2 en nog meer&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="body-cell col1"&gt;body row1&lt;/td&gt;
                      &lt;td class="body-cell col2"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col3"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col4"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col5"&gt;body row2 en nog meer&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="body-cell col1"&gt;body row1&lt;/td&gt;
                      &lt;td class="body-cell col2"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col3"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col4"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col5"&gt;body row2 en nog meer&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="body-cell col1"&gt;body row1&lt;/td&gt;
                      &lt;td class="body-cell col2"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col3"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col4"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col5"&gt;body row2 en nog meer&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="body-cell col1"&gt;body row1&lt;/td&gt;
                      &lt;td class="body-cell col2"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col3"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col4"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col5"&gt;body row2 en nog meer&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="body-cell col1"&gt;body row1&lt;/td&gt;
                      &lt;td class="body-cell col2"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col3"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col4"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col5"&gt;body row2 en nog meer&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="body-cell col1"&gt;body row1&lt;/td&gt;
                      &lt;td class="body-cell col2"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col3"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col4"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col5"&gt;body row2 en nog meer&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="body-cell col1"&gt;body row1&lt;/td&gt;
                      &lt;td class="body-cell col2"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col3"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col4"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col5"&gt;body row2 en nog meer&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="body-cell col1"&gt;body row1&lt;/td&gt;
                      &lt;td class="body-cell col2"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col3"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col4"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col5"&gt;body row2 en nog meer&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="body-cell col1"&gt;body row1&lt;/td&gt;
                      &lt;td class="body-cell col2"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col3"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col4"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col5"&gt;body row2 en nog meer&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="body-cell col1"&gt;body row1&lt;/td&gt;
                      &lt;td class="body-cell col2"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col3"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col4"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col5"&gt;body row2 en nog meer&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="body-cell col1"&gt;body row1&lt;/td&gt;
                      &lt;td class="body-cell col2"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col3"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col4"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col5"&gt;body row2 en nog meer&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="body-cell col1"&gt;body row1&lt;/td&gt;
                      &lt;td class="body-cell col2"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col3"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col4"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col5"&gt;body row2 en nog meer&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="body-cell col1"&gt;body row1&lt;/td&gt;
                      &lt;td class="body-cell col2"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col3"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col4"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col5"&gt;body row2 en nog meer&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="body-cell col1"&gt;body row1&lt;/td&gt;
                      &lt;td class="body-cell col2"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col3"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col4"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col5"&gt;body row2 en nog meer&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="body-cell col1"&gt;body row1&lt;/td&gt;
                      &lt;td class="body-cell col2"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col3"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col4"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col5"&gt;body row2 en nog meer&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="body-cell col1"&gt;body row1&lt;/td&gt;
                      &lt;td class="body-cell col2"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col3"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col4"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col5"&gt;body row2 en nog meer&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="body-cell col1"&gt;body row1&lt;/td&gt;
                      &lt;td class="body-cell col2"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col3"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col4"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col5"&gt;body row2 en nog meer&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="body-cell col1"&gt;body row1&lt;/td&gt;
                      &lt;td class="body-cell col2"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col3"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col4"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col5"&gt;body row2 en nog meer&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="body-cell col1"&gt;body row1&lt;/td&gt;
                      &lt;td class="body-cell col2"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col3"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col4"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col5"&gt;body row2 en nog meer&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="body-cell col1"&gt;body row1&lt;/td&gt;
                      &lt;td class="body-cell col2"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col3"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col4"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col5"&gt;body row2 en nog meer&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="body-cell col1"&gt;body row1&lt;/td&gt;
                      &lt;td class="body-cell col2"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col3"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col4"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col5"&gt;body row2 en nog meer&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="body-cell col1"&gt;body row1&lt;/td&gt;
                      &lt;td class="body-cell col2"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col3"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col4"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col5"&gt;body row2 en nog meer&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="body-cell col1"&gt;body row1&lt;/td&gt;
                      &lt;td class="body-cell col2"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col3"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col4"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col5"&gt;body row2 en nog meer&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="body-cell col1"&gt;body row1&lt;/td&gt;
                      &lt;td class="body-cell col2"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col3"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col4"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col5"&gt;body row2 en nog meer&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="body-cell col1"&gt;body row1&lt;/td&gt;
                      &lt;td class="body-cell col2"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col3"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col4"&gt;body row2&lt;/td&gt;
                      &lt;td class="body-cell col5"&gt;body row2 en nog meer&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And my CSS looks like this:</p>
  
  <pre><code>body {
      margin:0;
      padding:0;
      height: 100%;
      width: 100%;
  }
  table {
      border-collapse: collapse; /* make simple 1px lines borders if border defined */
  }
  tr {
      width: 100%;
  }
  
  .outer-container {
      background-color: #ccc;
      position: absolute;
      top:0;
      left: 0;
      right: 300px;
      bottom:40px;
      overflow: hidden;
  
  }
  .inner-container {
      width: 100%;
      height: 100%;
      position: relative;
      overflow-x: scroll;
      overflow-y:hidden;
  }
  .table-header {
      float:left;
      width: 100%;
  }
  .table-body {
      float:left;
      height: 100%;
      width: inherit;
      overflow-y: scroll;
  }
  .header-cell {
      background-color: yellow;
      text-align: left;
      height: 40px;
  }
  .body-cell {
      background-color: blue;
      text-align: left;
  }
  .col1, .col3, .col4, .col5 {
      width:120px;
      min-width: 120px;
  }
  .col2 {
      min-width: 300px;
  }
  </code></pre>
  
  <p>JSFiddle example - <a href="http://jsfiddle.net/W8URM/" rel="noreferrer">http://jsfiddle.net/W8URM/</a></p>
  
  <p>Thanks in advance guys!</p>