misaligned table headers

by Richard Hunter

HTML

<table>
  <thead>
    <tr>
      <th>Price</th>
      <th>Drops</th>
      <th>Description</th>
      <th>Category</th>
      <th>Item #</th>
      <th>Posted</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>$5.00
      <td>Oct 10
      <td>Valle item
      <td>Miscellaneous
      <td>1234
      <td>Sep 10 2020
    </tr>
    <tr>
      <td>$5.00
      <td>Oct 10
      <td>Valufgfgable item
      <td>Millaneous
      <td>1234
      <td>Sep 10 2020
    </tr>
    <tr>
      <td>$5.00
      <td>Oct fgfg10
      <td>Valuable item
      <td>Miscellaneous
      <td>1234
      <td>Sep 10 2020
    </tr>
    <tr>
      <td>$5.00
      <td>Oct 10
      <td>Valuable item
      <td>Misfgfgfgfcellaneous
      <td>1234
      <td>Sep 10 2020
    </tr>
  </tbody>
</table>

<!-- end snippet -->

SCSS

/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

table {
   width: 688px;
   /* 688 = column widths 80 + 56 + 280 + 120 + 56 + 96 */
   table-layout: fixed;
   font: 12px Courier;
   border-collapse: collapse;
 }

 table,
 th,
 td {
   border: 1px solid black;
   padding: 5px;
 }

 tbody {
   display: block;
   //width: 703px;
   /* 703 = 688 table width + 15 extra for scrollbar */
   overflow-y: scroll;
   height: 65px;
 }

 thead tr {
   display: block;
 }

 tr:nth-child(even) {
   background-color: #eee;
 }

 th:nth-child(1),
 td:nth-child(1) {
   text-align: right;
   width: 80px;
 }

 th:nth-child(2),
 td:nth-child(2) {
   text-align: left;
   width: 56px;
 }

 th:nth-child(3),
 td:nth-child(3) {
   text-align: left;
   width: 280px;
 }

 th:nth-child(4),
 td:nth-child(4) {
   text-align: left;
   width: 120px;
 }

 th:nth-child(5),
 td:nth-child(5) {
   text-align: right;
   width: 56px;
 }

 th:nth-child(6),
 td:nth-child(6) {
   text-align: left;
   width: 96px;
 }