title: html css scrollable table won't line up with table above
body: <p>The first table is fixed and is meant to stay in view as the second table is scrolled down. How can I make these two tables line up?</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>#index_table,
  #index_table_header {
    text-align: left;
    margin: 20px;
    margin: 0 auto;
    table-layout: fixed;
  }
  
  #index_table,
  #index_table_header {
    width: 800px;
  }
  
  #index_table {
    display: block;
    height: 390px;
    overflow-y: scroll;
  }
  
  #index_table_header td {
    padding: 10px 8px;
    width: 100px;
    border: 1px solid black;
  }
  
  #index_table td {
    padding: 10px 8px;
    width: 100px;
    border: 1px solid black;
  }
  
  #index_table td:nth-child(1),
  #index_table_header td:nth-child(1) {
    width: 80px;
  }
  
  #index_table td:nth-child(3),
  #index_table_header td:nth-child(3) {
    width: 70px;
  }
  
  #index_table td:nth-child(5),
  #index_table_header td:nth-child(5) {
    width: 200px;
  }
  
  #index_table td:nth-child(2),
  #index_table_header td:nth-child(2) {
    width: 250px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table id="index_table_header"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;td&gt;ID&lt;/td&gt;
        &lt;td&gt;Item&lt;/td&gt;
        &lt;td&gt;Amount&lt;/td&gt;
        &lt;td&gt;Added&lt;/td&gt;
        &lt;td&gt;Nutritional Value ID&lt;/td&gt;
        &lt;td&gt;Actions&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
  &lt;/table&gt;
  &lt;table id="index_table"&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;395&lt;/td&gt;
        &lt;td&gt;chicken liver&lt;/td&gt;
        &lt;td&gt;0.37&lt;/td&gt;
        &lt;td&gt;2019-10-14&lt;/td&gt;
        &lt;td&gt;67&lt;/td&gt;
        &lt;td&gt;
          &lt;a href="/delete/395"&gt;Delete&lt;/a&gt;
          &lt;br&gt;
          &lt;a href="/update/395"&gt;Update&lt;/a&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>a few things to consider</p>
  
  <ol>
  <li>I need the tables and table cells (columns) to exactly line up</li>
  <li>The second table is actually has hundreds of rows and I want it scrollable and I don't want the header to go out of view, this is why I have two tables and I don't want to combine to one table.</li>
  </ol>