<h3>Choose your vertical alignment:</h3>
<div id="buttons">
  <button id="top">top</button>
  <button id="middle" class="active">middle</button>
  <button id="bottom">bottom</button>
</div>
<table class="middle">
  <thead>
    <tr>
      <th>Month</th>
      <th># Widgets</th>
      <th>Costs</th>
      <th>Income</th>
      <th>Profits</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>April</td>
      <td>2,000</td>
      <td>$220.00</td>
      <td>$418.26</td>
      <td>$198.26</td>
    </tr>
    <tr>
      <td>May</td>
      <td>1,500</td>
      <td>$155.70</td>
      <td>$187.36</td>
      <td>$31.66</td>
    </tr>
    <tr>
      <td>June</td>
      <td>995</td>
      <td>$843.00</td>
      <td>$1536.20</td>
      <td>$693.20</td>
    </tr>
    <tr>
      <td>July</td>
      <td>2,200</td>
      <td>$101.80</td>
      <td>$2,526.59</td>
      <td>$2,424.79</td>
    </tr>
    <tr>
      <td>September</td>
      <td>2,500</td>
      <td>$142.00</td>
      <td>$1,055.37</td>
      <td>$913.37</td>
    </tr>
    <tr>
      <td>Total</td>
      <td>9,195</td>
      <td>$1,462.5‬0</td>
      <td>$5,723.78‬</td>
      <td>$4,261.28‬</td>
    </tr>
  </tbody>
</table>

html, body {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-family: Arial, sans-serif;
  color: #2C3A47;
}

h3 {
  font-family: serif;
  margin: 1em;
}

table {
  border-collapse: collapse;
  margin: 1em;
  table-layout: fixed;
}

th, td {
  padding: 0.5em 1em;
  border: 1px solid #CAD3C8;
  min-width: 15%;
  text-align: right;
  height: 4em;
}

table.top {
  th, td {
    vertical-align: top;
  }
}
table.middle {
  th, td {
    vertical-align: middle;
  }
}
table.bottom {
  th, td {
    vertical-align: bottom;
  }
}

tr:last-child {
  color: white;
  color: #58B19F;
  font-weight: bold;
}

th {
  background-color: lighten(#58B19F, 40);
}

tbody > tr:last-child {
  background-color: lighten(#D6A2E8, 20);
}
tbody > tr > td:last-child {
  background-color: lighten(#D6A2E8, 20);
}
tbody > tr:last-child > td:last-child {
  background-color: #82589F;
  color: white;
}

tr > th, tr > td {
  
  &:nth-child(1) {
    text-align: left;
  }
  
  &:nth-child(2) {
    text-align: right;
  }
  
}


#buttons {
  margin: 1em;
  display: grid;
  grid-gap: 0.2em;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-auto-rows: max-content;

  & button {
    color: #9AECDB;
    background-color: #2c3a47;
    border: 0;
    padding: 0.4em 1em;
    font-size: 1em;
    cursor: pointer;

    &.active {
      background-color: #182C61;
    }

    &:focus {
      outline: 3px solid #d6a2e8;
    }

    &:hover {
      opacity: 0.9;
    }
  }
}

const buttons = $('#buttons > button');
buttons.on('click', function() {
  buttons.removeClass('active');
  $(this).addClass('active');
  
  const id = $(this).attr('id');
  $('table').removeClass();
  $('table').addClass(id);
});