title: Table body column not same width as the Header column
body: <p>Hello i'm currently creating a table,The first header have a smaller text content than the other Header while its corresponding Column on the Body have wider/bigger content since its a name of a group. What i want to achieve is that the column's on the header and content should have corresponding width depending on which of them is wider. </p>
  
  <p>Here is the fiddle of the table: <a href="https://jsfiddle.net/pynechan/b4s3brqc/19/" rel="nofollow noreferrer">https://jsfiddle.net/pynechan/b4s3brqc/19/</a></p>
  
  <pre><code>//HTML
      &lt;h2&gt;Header fixed&lt;/h2&gt;
  &lt;br/&gt;
  &lt;br/&gt;
  
  &lt;table&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;HEADER&lt;/th&gt;
              &lt;th&gt;HEADER 2&lt;/th&gt;
              &lt;th&gt;HEADER 3&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
  
      &lt;tbody&gt;
  
          &lt;tr&gt;
              &lt;td&gt;1. DATA&lt;/td&gt;
              &lt;td&gt;1. DATA 2&lt;/td&gt;
              &lt;td&gt;1. DATA 3&lt;/td&gt;
          &lt;/tr&gt;
  
      &lt;/tbody&gt;
  &lt;/table&gt;
  
  //CSS
  
  
     table {
      max-width:980px;
      table-layout:fixed;
      margin:auto;
  }
  th, td {
      padding:5px 10px;
      border:1px solid #000;
  }
  thead, tfoot {
      background:#f9f9f9;
      display:table;
      width:100%;
      width:calc(100% - 18px);
  }
  tbody {
      height:300px;
      overflow:auto;
      overflow-x:hidden;
      display:block;
      width:100%;
  }
  tbody tr {
      display:table;
      width:100%;
      table-layout:fixed;
  }
  
  tbody{
    scrollbar-face-color: ThreeDFace !important;
    scrollbar-shadow-color: ThreeDDarkShadow !important;
    scrollbar-highlight-color: ThreeDHighlight !important;
    scrollbar-track-color: Scrollbar !important;
    scrollbar-arrow-color: ButtonText !important;
  }
  </code></pre>