Html – Table row shadow below all data cells

/* removing all default padding and margins, and ensuring
   that all elements are sized to include their padding
   and border-widths: */
*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

table {
  /* CSS custom properties for various properties to ensure
     common styling where appropriate;
      --tr-space-between is the size of the percieved/visible
     gap between adjacent rows: */
  --tr-space-between: 0.5rem;
  /* --td-padding-block is derived from the previous variable,
     using calc() so that the space between 'rows' is inserted
     as padding (padding-block) to create that row-spacing: */
  --td-padding-block: calc(var(--tr-space-between)/2);
  --shadow-color: lightgray;
  --row-color: #fff;
  /* the desired radius of the 'rows': */
  --row-radius: 0.5rem;
  /* to ensure page background can be seen (if required)
     in the row-gaps: */
  background-color: transparent;
  /* collapsing the borders between cells in order to allow the
     content to be contiguous, and using a different means to
     achieve row-"separation": */
  border-collapse: collapse;
  border-spacing: 0;
  /* using a CSS filter, drop-shadow(), to create the shadows: */
  filter: drop-shadow(0 0 0.5rem var(--shadow-color));
  /* centering the <table> */
  margin-inline: auto;
}

td,
th {
  min-width: 170px;
}

td,
th {
  /* again to ensure that the page background is - where
     appropriate - visible through the visual gaps: */
  background-color: transparent;
}

td {
  /* setting the cell padding on the block axis, to "separate"
     the "rows", while no padding is applied on the inline
     axis, so that the rows are visually contiguous: */
  padding-block: var(--td-padding-block);
}

/* using logical properties to set the border radii: */
td:first-child .content {
  border-start-start-radius: var(--row-radius);
  border-end-start-radius: var(--row-radius);
}

td:last-child .content {
  border-start-end-radius: var(--row-radius);
  border-end-end-radius: var(--row-radius);
}

.content {
  /* setting the background-color of the "row": */
  background-color: var(--row-color);
  /* applying padding on all axes, to move the content
     away from the edges of the 'row': */
  padding: 0.5rem;
}

<main>
  <table>
    <thead>
      <tr>
        <th>head</th>
        <th>head</th>
        <th>head</th>
      </tr>
    </thead>
    <tbody>
      <!-- I've changed the class-name of the <div> from 'shadow' to
           'content' to reflect what the "purpose" of the element: -->
      <tr>
        <td>
          <div class="content">div</div>
        </td>
        <td>
          <div class="content">div</div>
        </td>
        <td>
          <div class="content">div</div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="content">div</div>
        </td>
        <td>
          <div class="content">div</div>
        </td>
        <td>
          <div class="content">div</div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="content">div</div>
        </td>
        <td>
          <div class="content">div</div>
        </td>
        <td>
          <div class="content">div</div>
        </td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>foot</td>
        <td>foot</td>
        <td>foot</td>
      </tr>
    </tfoot>
  </table>
</main>