title: How to keep tables' placement static when toggling between tables
body: <p>First post, so apologies for any no-nos...</p>
  
  <p>I have two tables--one that records wood that I have in stock, and another that lists projects that will use that wood.</p>
  
  <p>I set up a toggle for changing which one of the tables are displayed, but this causes the tables' positions to move around in their vertical position. One table is larger than the other, so I understand why it changes... but I'm not sure what the best way would be to control this change. I'd like to stop this motion if at all possible.</p>
  
  <p>NOTE: I am new to HTML/CSS/JavaScript so there is probably a lot of mess in there. I tried to organize it, comments, etc.</p>
  
  <p>JSFiddle:[<a href="https://js" rel="nofollow noreferrer">https://js</a><a href="https://jsfiddle.net/L6sdgcrq/" rel="nofollow noreferrer">https://jsfiddle.net/L6sdgcrq/</a></p>
  
  <pre><code>/*
  Start table styling block
  */
  .tableStats {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 500px;
  }
  
  .tableContainer {
      width: 95%;
      display: flex;
      justify-content: center;
  }
  
  #woodTable {
      width: 1200px;
      max-height: 400px;
      display: table;
      justify-content: center;
      border-radius: 15px;
      border-collapse: unset;
      margin-top: 15px;
      margin-bottom: auto;
      padding: 10px !important;
      background-color: lightgray;
      border-bottom: none;
  }
  
  #projectTable {
      width: 1200px;
      max-height: 400px;
      display: none;
      justify-content: center;
      border-radius: 15px;
      border-collapse: unset;
      margin-top: 15px;
      margin-bottom: auto;
      padding: 10px !important;
      background-color: lightgray;
      border-bottom: none;
  }
  
  th {
      padding: 15px;
      margin: 10px;
      border-bottom: 2px solid black;
      border-radius: 2px;
  }
  
  td {
      text-align: center;
      padding: 5px;
  }
  
  tr {
      padding: 10px;
  }
  
  tr:last-child, td:last-child {
      border-bottom: none;
  }
  
  td:nth-child(n+1) {
      border-left: 2px solid black;
  }
  
  th:first-child, td:first-child {
      border-left: none;
  }
  
  .smaller {
      width: 50px;
  }
  
  /*
  End table styling block
  */
  
  </code></pre>
  
  <p>You'll see what I'm talking about if you scroll to the top of the window in the executed portion.</p>