title: How to keep thead and tbody width at 100% using block display
body: <p>So I have an HTML table, with a thead and tbody. I would like to have the body part of the table to scroll, while keeping the header part where it is. I found a solution to that by having the thead and tbody as a block display, however once I do that, the content gets push to the left, instead of stretching the whole table. The scrollbar is where it should be (all the way on the right) but the contents is crushed and then the table data doesn't line up with the headers.  If I take away display:block from the thead and tbody, everything lines up perfectly however I can't get a scrollbar to appear. Any suggestions?</p>
  
  <p>This is my full code. If you take out the display:block in both the thead and tbody, that's how it should look (at least the width of it and alignment)</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>table {
    width:800px;
    margin-top:30px;
    margin-bottom:30px;
    border-collapse:collapse;
  }
  
  th {
    background-color:rgb(216,191,216);
    text-align:center;
    margin:0px;
  }
  
  td {
    text-align:center;
    border-bottom:1px dashed black;
    padding-top:5px;
    padding-bottom:5px;
  }
  
  .tableHeading {
    font-size:25px;
  }
  
  .leftBorder {
    border-left:1px dashed black;
  }
  
  .rightBorder {
    border-right:1px dashed black;
  }
  
  thead {
    display:block;
  }
  
  tbody {
    display:block;
    overflow-y:auto;
    max-height:100px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class='center'&gt;
    &lt;table&gt;
        &lt;thead&gt;
        &lt;tr&gt;&lt;th colspan="5" class='tableHeading'&gt;Receipts&lt;/th&gt;&lt;/tr&gt;
        &lt;tr&gt;
            &lt;th&gt;Name&lt;/th&gt;
            &lt;th&gt;Price&lt;/th&gt;
            &lt;th&gt;Date&lt;/th&gt;
            &lt;th&gt;Category&lt;/th&gt;
            &lt;th&gt;Comment&lt;/th&gt;
        &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
        &lt;tr&gt;
            &lt;td&gt;One&lt;/td&gt;
            &lt;td&gt;1&lt;/td&gt;
            &lt;td&gt;Mon&lt;/td&gt;
            &lt;td&gt;Uncategorized&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;Two&lt;/td&gt;
            &lt;td&gt;2&lt;/td&gt;
            &lt;td&gt;Mon&lt;/td&gt;
            &lt;td&gt;Uncategorized&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;Three&lt;/td&gt;
            &lt;td&gt;3&lt;/td&gt;
            &lt;td&gt;Mon&lt;/td&gt;
            &lt;td&gt;Uncategorized&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;Four&lt;/td&gt;
            &lt;td&gt;4&lt;/td&gt;
            &lt;td&gt;Mon&lt;/td&gt;
            &lt;td&gt;Uncategorized&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;Five&lt;/td&gt;
            &lt;td&gt;5&lt;/td&gt;
            &lt;td&gt;Mon&lt;/td&gt;
            &lt;td&gt;Uncategorized&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;/table&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>