How to make HTML Table Take Full Width Using SASS/CSS

Question

I'm trying to style a table using only SASS/CSS. I've set the width of my table to be 100%. However, when I set the font-size of the th element to 0.8em, My table fails to take all of the width it's allowed (Notice that the columns do not reach the border line on the right). How can I fix this using CSS, given that I don't control the HTML?

SASS/CSS

table {
      color: black;
      background-color: white;
      border-color: black;
      border-style: solid;
      border-width: 0 1px 1px 1px;
      border-radius: 5px;
      border-collapse: collapse;
      border-spacing: 0;
      display: block;
      overflow: auto;
      width: 100%;
    
      thead {
        th {
          color: white;
          background-color: black;
          font-weight: bold;
          font-size: 0.8em;
          padding: 5px 10px;
          vertical-align: bottom;
        }
    
        th:first-child {
          border-top-left-radius: 5px;
        }
    
        th:last-child {
          border-top-right-radius: 5px;
        }
      }
    
      tbody {
        td {
          border-top: 1px solid gray;
          padding: 5px 10px;
          vertical-align: top;
        }
    
        tr:nth-child(2n) {
          background-color: lightgray;
        }
      }
    }

    <table>
      <thead>
        <tr>
          <th>Method</th>
          <th>Runtime</th>
          <th align="right">Mean</th>
          <th align="right">Ratio</th>
          <th align="right">Gen 0/1k Op</th>
          <th align="right">Allocated Memory/Op</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Baseline</td>
          <td>Clr</td>
          <td align="right">1.833 us</td>
          <td align="right">1.00</td>
          <td align="right">2.0542</td>
          <td align="right">6.31 KB</td>
        </tr>
      </tbody>
    </table>

Answer 1

Here is what I think you want, I just removed border-collapse, display:block (this make the table default CSS), here is a codepen with SCSS and a working snippet is here too:

table {
  color: black;
  background-color: white;
  border-color: black;
  border-style: solid;
  border-width: 0 1px 1px 1px;
  border-radius: 5px;
  border-collapse: separte;
  border-spacing: 0;
  display: table;
  overflow: auto;
  width: 100%;
}
table thead th {
  color: white;
  background-color: black;
  font-weight: bold;
  font-size: 0.8em;
  padding: 5px 10px;
  vertical-align: bottom;
}
table thead th:first-child {
  border-top-left-radius: 5px;
}
table thead th:last-child {
  border-top-right-radius: 5px;
}
table tbody td {
  border-top: 1px solid gray;
  padding: 5px 10px;
  vertical-align: top;
}
table tbody tr:nth-child(2n) {
  background-color: lightgray;
}

<table>
  <thead>
    <tr>
      <th>Method</th>
      <th>Runtime</th>
      <th align="right">Mean</th>
      <th align="right">Ratio</th>
      <th align="right">Gen 0/1k Op</th>
      <th align="right">Allocated Memory/Op</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Baseline</td>
      <td>Clr</td>
      <td align="right">1.833 us</td>
      <td align="right">1.00</td>
      <td align="right">2.0542</td>
      <td align="right">6.31 KB</td>
    </tr>
  </tbody>
</table>