title: Table is horizontally scrollable but sticky header and footer are not
body: <p>I am currently working on a table that will be filled with over 500 records and has a lot of headers. I have managed to get most of it done, but the problem is that I cannot seem to get the header and footer to scroll with the table horizontally as well as being sticky headers/footers. </p>
  
  <p>Essentially: I want the header/footer to be sticky vertically but not horizontally. Is that possible in CSS only?</p>
  
  <p>Here is a link to a jsFiddle showing off the problem I am having: <a href="https://jsfiddle.net/j8rd9jpj/14/" rel="nofollow noreferrer">https://jsfiddle.net/j8rd9jpj/14/</a></p>
  
  <p>I have found some questions/solutions similar to my problem, but they were either not solved or the question didn't really apply to my situation:</p>
  
  <p><a href="https://stackoverflow.com/questions/15533167/horizontal-scrolling-on-table-with-fixed-header?rq=1">Horizontal scrolling on table with fixed header</a></p>
  
  <p><a href="https://stackoverflow.com/questions/14977864/fixed-header-table-with-horizontal-scrollbar-and-vertical-scrollbar-on">Fixed header table with horizontal scrollbar and vertical scrollbar on</a></p>
  
  <p>I am trying to solve this issue using CSS only, the table HTML is fixed and I can't really add extra divs for the footer or header .</p>
  
  <p>I am thinking the issue is that the scroll bar is inside the table vs outside of it, but I am not sure how to approach this problem</p>
  
  <p>My HTML: </p>
  
  <pre><code>&lt;div id="main"&gt;
    &lt;table id="tableData"&gt;
      &lt;thead&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&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;tfoot&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;/tfoot&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My CSS: </p>
  
  <pre><code>body {
    overflow: hidden;
  }
  
  #main {
    overflow: scroll;
    display: table;
    max-height: 200px;
  }
  
  #tableData {
    table-layout: fixed;
    margin: auto;
    width: 100%;
    overflow-x: auto;
  }
  
  #tableData&gt;tbody&gt;tr&gt;td {
    width: 120px;
    padding: 1px 8px 8px 1px;
    word-wrap: break-word;
  }
  
  #tableData thead,
  #tableData tfoot {
    display: table;
    width: 100%;
  }
  
  #tableData tbody {
    height: 100px;
    overflow: auto;
    display: block;
    width: 100%;
  }
  
  #tableData tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
  }
  
  #tableData th {
    min-width: 120px;
  }
  </code></pre>
  
  <p>Thank you!</p>