title: How to align width of a table header column and the table body column?
body: <p>I'm trying to create a table with the following requirements in <code>HTML</code>:</p>
  
  <ul>
  <li>It should be possible to scroll (vertical and horizontal)</li>
  <li>It should have fixed header columns</li>
  <li>It shouldn't have word-wrap</li>
  <li>Width of all the columns should be adoptive (aligned to the left side of the content)</li>
  <li>In case if the table has width less than 100%, the last column should be stretched to the right.</li>
  <li>Header columns should have same width as according to data columns</li>
  </ul>
  
  <p>According to this requirement I've created table, also I did first 5 requirements except the last one.</p>
  
  <p>My example:</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>.TableViewer table
  {
     width:           100%;
     table-layout:    fixed;
     border-collapse: collapse;
  }
  .TableViewer table tbody
  {
     display:  block;
     width:    100%;
     overflow: auto;
     height:   400px;
  }
  .TableViewer table thead tr
  {
     display: block;
  }
  .TableViewer table thead
  {
     background: rgb(191, 191, 191);
  }
  .TableViewer table th
  {
     padding:     0 5px;
     text-align:  center;
     font-family: monospace;
     white-space: nowrap;
     border:      1px solid rgb(153, 153, 153);
  }
  .TableViewer table td
  {
     padding:     0 5px;
     text-align:  left;
     font-family: monospace;
     white-space: nowrap;
     border:      1px solid rgb(153, 153, 153);
  }
  .TableViewer table td:last-child {
      width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="TableViewer"&gt;
     &lt;table&gt;
        &lt;thead&gt;
           &lt;tr&gt;&lt;th&gt;index&lt;/th&gt;&lt;th&gt;time&lt;/th&gt;&lt;th&gt;data&lt;/th&gt;&lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
           &lt;tr&gt;&lt;td&gt;nnnnnn&lt;/td&gt;&lt;td&gt;hh:mm:ss dd/mm/yyyy &lt;/td&gt;&lt;td&gt;[some data]&lt;/td&gt;&lt;/tr&gt;
           &lt;tr&gt;&lt;td&gt;nnnnnn&lt;/td&gt;&lt;td&gt;hh:mm:ss dd/mm/yyyy &lt;/td&gt;&lt;td&gt;[some data]&lt;/td&gt;&lt;/tr&gt;
           &lt;tr&gt;&lt;td&gt;nnnnnn&lt;/td&gt;&lt;td&gt;hh:mm:ss dd/mm/yyyy &lt;/td&gt;&lt;td&gt;[some data]&lt;/td&gt;&lt;/tr&gt;
           &lt;tr&gt;&lt;td&gt;nnnnnn&lt;/td&gt;&lt;td&gt;hh:mm:ss dd/mm/yyyy &lt;/td&gt;&lt;td&gt;[some data]&lt;/td&gt;&lt;/tr&gt;
           &lt;tr&gt;&lt;td&gt;nnnnnn&lt;/td&gt;&lt;td&gt;hh:mm:ss dd/mm/yyyy &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>
  
  <p>Summary: How to stretch <code>thead</code> columns width according to the <code>tbody</code> column width? (in provided solution borders)</p>
  
  <p>Thanks in advance!</p>