Getting table header and body to match column widths

Question

I created the following CodePen Source

The following CSS works great in getting the body to scroll properly but the header and body don't line up.

The table structure is as follows:

<div>
    <table class="is-table-with-scrolling-body">
       <thead>
          <tr>
             <th>Created By</th>
             <th>Subject</th>
             <th>Date Created</th>
            <th>File</th>
            <th></th>
          </tr>
       </thead>
       <tbody>
          <tr data-index="0">
             <td><span>Person Name 1</span></td>
             <td>First upload of...</td>
             <td>3/21/2022 7:18 PM</td>
             <td>0</td>
            <td></td>
          </tr>
          ...
       </tbody>
    </table>
</div>

and the CSS that makes the body scrollable (found online from my research) is:

table {
  &.is-table-with-scrolling-body {
    width: 100%;
    height: 400px;

    thead,
    tbody,
    tr {
      display: table;
      width: 100%;
      table-layout: fixed;
      > th {
        border: solid 1px red;
      }
    }

    tbody {
      display: block;
      overflow: auto;
      table-layout: fixed;
      max-height: 190px;;
      > tr {
        > td {
          border: solid 1px red;
        }
      }
    }
  }
}

Answer 1

I converted your SCSS to CSS

You need to hide the right edge scrollbar while keeping the functionality which means styling using

::webkit-scrollbar

or similar as your needs require

table.is-table-with-scrolling-body thead::-webkit-scrollbar,
table.is-table-with-scrolling-body tbody::-webkit-scrollbar {
  display: none;
}

div {
  height: 200px;
  overflow: hidden;
}

table.is-table-with-scrolling-body {
  width: 100%;
  height: auto;
}

table.is-table-with-scrolling-body thead,
table.is-table-with-scrolling-body tbody {
  overflow: auto;
}

table.is-table-with-scrolling-body thead::-webkit-scrollbar,
table.is-table-with-scrolling-body tbody::-webkit-scrollbar {
  display: none;
}

table.is-table-with-scrolling-body thead tr,
table.is-table-with-scrolling-body tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

table.is-table-with-scrolling-body thead tr>th,
table.is-table-with-scrolling-body tbody tr>th {
  border: solid 1px red;
}

table.is-table-with-scrolling-body tbody {
  display: block;
  table-layout: fixed;
  max-height: 200px;
}

table.is-table-with-scrolling-body tbody>tr>td {
  border: solid 1px red;
}

<div>
  <table class="is-table-with-scrolling-body">
    <thead>
      <tr>
        <th>Created By</th>
        <th>Subject</th>
        <th>Date Created</th>
        <th>File</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr data-index="0">
        <td><span>Person Name 1</span></td>
        <td>First upload of...</td>
        <td>3/21/2022 7:18 PM</td>
        <td>0</td>
        <td></td>
      </tr>
      <tr data-index="0">
        <td><span>Person Name 1</span></td>
        <td>First upload of...</td>
        <td>3/21/2022 7:18 PM</td>
        <td>0</td>
        <td></td>
      </tr>
      <tr data-index="0">
        <td><span>Person Name 1</span></td>
        <td>First upload of...</td>
        <td>3/21/2022 7:18 PM</td>
        <td>0</td>
        <td></td>
      </tr>
      <tr data-index="0">
        <td><span>Person Name 1</span></td>
        <td>First upload of...</td>
        <td>3/21/2022 7:18 PM</td>
        <td>0</td>
        <td></td>
      </tr>
      <tr data-index="0">
        <td><span>Person Name 1</span></td>
        <td>First upload of...</td>
        <td>3/21/2022 7:18 PM</td>
        <td>0</td>
        <td></td>
      </tr>
      <tr data-index="0">
        <td><span>Person Name 1</span></td>
        <td>First upload of...</td>
        <td>3/21/2022 7:18 PM</td>
        <td>0</td>
        <td></td>
      </tr>
      <tr data-index="0">
        <td><span>Person Name 1</span></td>
        <td>First upload of...</td>
        <td>3/21/2022 7:18 PM</td>
        <td>0</td>
        <td></td>
      </tr>
      <tr data-index="0">
        <td><span>Person Name 1</span></td>
        <td>First upload of...</td>
        <td>3/21/2022 7:18 PM</td>
        <td>0</td>
        <td></td>
      </tr>
      <tr data-index="0">
        <td><span>Person Name 1</span></td>
        <td>First upload of...</td>
        <td>3/21/2022 7:18 PM</td>
        <td>0</td>
        <td></td>
      </tr>
      <tr data-index="0">
        <td><span>Person Name 1</span></td>
        <td>First upload of...</td>
        <td>3/21/2022 7:18 PM</td>
        <td>0</td>
        <td></td>
      </tr>
    </tbody>
  </table>

</div>