Getting table header and body to match column widths-CodePudding

I created the following

The table structure is as follows:

<div>
    <table >
       <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;
        }
      }
    }
  }
}

CodePudding user response：

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 >
    <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>