title: Horizontal scrolling on table with fixed header
body: <p>I have created a fixed header using CSS (mainly just setting the position of the thead to be fixed), but the problem that I run in to is if the user's resolution size or window size is smaller than the tables size, I need to add in a horizontal scroll bar so that they can see everything. i have tried setting overflow to be auto and scroll, but only when I scroll down to the bottom of the page does the scroll bar appear. Also I need to be able to have the thead scroll with the table. Any suggestions on having the horizontal scroll bar appear if the window is smaller than the tables size and how to have the thead still be fixed in one position but still scroll to see more of the thead if the window size is too small?</p>
  
  <p><a href="http://jsfiddle.net/E9mqk/1/" rel="nofollow noreferrer">http://jsfiddle.net/E9mqk/1/</a></p>
  
  <p>The HTML is:</p>
  
  <pre><code>&lt;div class="table-wrapper"&gt;
  &lt;table id="table-information"&gt;
      &lt;colgroup&gt;&lt;/colgroup&gt;
      &lt;colgroup&gt;&lt;/colgroup&gt;
      &lt;colgroup&gt;&lt;/colgroup&gt;
      &lt;colgroup&gt;&lt;/colgroup&gt;
      &lt;colgroup&gt;&lt;/colgroup&gt;
      &lt;colgroup&gt;&lt;/colgroup&gt;
      &lt;colgroup&gt;&lt;/colgroup&gt;
      &lt;colgroup&gt;&lt;/colgroup&gt;
      &lt;thead class="table-fixed-header" id="table-data"&gt;
          &lt;tr&gt;
              &lt;th&gt;Something 1&lt;/th&gt;
              &lt;th&gt;Something 2&lt;/th&gt;
              &lt;th&gt;Something 3&lt;/th&gt;
              &lt;th&gt;Something 4&lt;/th&gt;
              &lt;th&gt;Something 5&lt;/th&gt;
              &lt;th&gt;Something 6&lt;/th&gt;
              &lt;th&gt;Something 7&lt;/th&gt;
              &lt;th&gt;Something 8&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody class="table-body"&gt;   
          &lt;tr&gt;
              &lt;td&gt;Data&lt;/td&gt;
              &lt;td&gt;Data&lt;/td&gt;
              &lt;td&gt;Data&lt;/td&gt;
              &lt;td&gt;Data&lt;/td&gt;
              &lt;td&gt;Data&lt;/td&gt;
              &lt;td&gt;Data&lt;/td&gt;
              &lt;td&gt;Data&lt;/td&gt;
              &lt;td&gt;Data&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Data&lt;/td&gt;
              &lt;td&gt;Data&lt;/td&gt;
              &lt;td&gt;Data&lt;/td&gt;
              &lt;td&gt;Data&lt;/td&gt;
              &lt;td&gt;Data&lt;/td&gt;
              &lt;td&gt;Data&lt;/td&gt;
              &lt;td&gt;Data&lt;/td&gt;
              &lt;td&gt;Data&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Data&lt;/td&gt;
              &lt;td&gt;Data&lt;/td&gt;
              &lt;td&gt;Data&lt;/td&gt;
              &lt;td&gt;Data&lt;/td&gt;
              &lt;td&gt;Data&lt;/td&gt;
              &lt;td&gt;Data&lt;/td&gt;
              &lt;td&gt;Data&lt;/td&gt;
              &lt;td&gt;Data&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the CSS is:</p>
  
  <pre><code>.table-wrapper {
      overflow-x: scroll;
  }
  .table-fixed-header {
      position: fixed;
  }
  #table-information tbody:before {
      line-height: 30px;
      content:"-";
      color:white; /* to hide text */
      display:block;
  }
  #table-information td {
      max-width: 100px;
      min-width: 100px;
  }
  #table-information th {
      max-width: 100px;
      min-width: 100px;
  }
  </code></pre>