title: Fixed table header does not match column width of the body
body: <p>I just want my table to have a vertical scrollbar and I ended up containing the whole table in a div, make the table head in a fixed position and this was the result. Is there a easy way to have a simple scrollbar in a table and does not cut the width of my table while keeping the table at the middle of the page.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>thead, tr, th, td, tbody{
   border: 1px solid;
   text-align: center;
   padding: 3px;
   
  }
  
  th{
   background-color:#99ccff;
   height: 40px;
   font-size: 20px;
  
  }
  
  tr{
   width: 500%;
   height: 20px;
   font-size: 17px;
  }
  
  tr:nth-child(even) {
   background-color: #CCFFFF;
  }
  tr:nth-child(odd) {
   background-color: #fae8d1;
  }
  
  thead{
   position: fixed;
   width: 1200px;
  }
  .tbldiv{
   width: 1200px;
   height: 600px;
   border: 2px solid;
   overflow: auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="tbldiv"&gt;
   &lt;table class="scroll"&gt;
    &lt;thead&gt;
     &lt;tr&gt;
      &lt;th class="col-md-2"&gt;Name&lt;/th&gt;
      &lt;th class="col-md-2"&gt;Birthday&lt;/th&gt;
      &lt;th class="col-md-2"&gt;Gender&lt;/th&gt;
      &lt;th class="col-md-2"&gt;Marital&lt;/th&gt;
      &lt;th class="col-md-2"&gt;Address&lt;/th&gt;
      &lt;th class="col-md-2"&gt;Telephone&lt;/th&gt;
      &lt;th class="col-md-2"&gt;Email&lt;/th&gt;
     &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
     &lt;tr&gt;
      &lt;td&gt;Some Data&lt;/td&gt;
      &lt;td&gt;Some Data&lt;/td&gt;
      &lt;td&gt;Some Data&lt;/td&gt;
      &lt;td&gt;Some Data&lt;/td&gt;
      &lt;td&gt;Some Data&lt;/td&gt;
      &lt;td&gt;Some Data&lt;/td&gt;
      &lt;td&gt;Some Data&lt;/td&gt;
     &lt;/tr&gt;
        &lt;tr&gt;
      &lt;td&gt;Some Data&lt;/td&gt;
      &lt;td&gt;Some Data&lt;/td&gt;
      &lt;td&gt;Some Data&lt;/td&gt;
      &lt;td&gt;Some Data&lt;/td&gt;
      &lt;td&gt;Some Data&lt;/td&gt;
      &lt;td&gt;Some Data&lt;/td&gt;
      &lt;td&gt;Some Data&lt;/td&gt;
     &lt;/tr&gt;
        &lt;tr&gt;
      &lt;td&gt;Some Data&lt;/td&gt;
      &lt;td&gt;Some Data&lt;/td&gt;
      &lt;td&gt;Some Data&lt;/td&gt;
      &lt;td&gt;Some Data&lt;/td&gt;
      &lt;td&gt;Some Data&lt;/td&gt;
      &lt;td&gt;Some Data&lt;/td&gt;
      &lt;td&gt;Some Data&lt;/td&gt;
     &lt;/tr&gt;
        &lt;tr&gt;
      &lt;td&gt;Some Data&lt;/td&gt;
      &lt;td&gt;Some Data&lt;/td&gt;
      &lt;td&gt;Some Data&lt;/td&gt;
      &lt;td&gt;Some Data&lt;/td&gt;
      &lt;td&gt;Some Data&lt;/td&gt;
      &lt;td&gt;Some Data&lt;/td&gt;
      &lt;td&gt;Some Data&lt;/td&gt;
     &lt;/tr&gt;
        &lt;tr&gt;
      &lt;td&gt;Some Data&lt;/td&gt;
      &lt;td&gt;Some Data&lt;/td&gt;
      &lt;td&gt;Some Data&lt;/td&gt;
      &lt;td&gt;Some Data&lt;/td&gt;
      &lt;td&gt;Some Data&lt;/td&gt;
      &lt;td&gt;Some Data&lt;/td&gt;
      &lt;td&gt;Some Data&lt;/td&gt;
     &lt;/tr&gt;
        &lt;tr&gt;
      &lt;td&gt;Some Data&lt;/td&gt;
      &lt;td&gt;Some Data&lt;/td&gt;
      &lt;td&gt;Some Data&lt;/td&gt;
      &lt;td&gt;Some Data&lt;/td&gt;
      &lt;td&gt;Some Data&lt;/td&gt;
      &lt;td&gt;Some Data&lt;/td&gt;
      &lt;td&gt;Some Data&lt;/td&gt;
     &lt;/tr&gt;
        &lt;tr&gt;
      &lt;td&gt;Some Data&lt;/td&gt;
      &lt;td&gt;Some Data&lt;/td&gt;
      &lt;td&gt;Some Data&lt;/td&gt;
      &lt;td&gt;Some Data&lt;/td&gt;
      &lt;td&gt;Some Data&lt;/td&gt;
      &lt;td&gt;Some Data&lt;/td&gt;
      &lt;td&gt;Some Data&lt;/td&gt;
     &lt;/tr&gt;
    &lt;/tbody&gt;
   &lt;/table&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>