<table class="c-tbl" id="table">
  <thead>
    <tr><th>Name</th><th>Known As</th><th>Year</th></tr>
  </thead>
  <tbody>
    <tr><td>Bruce Wayne</td><td>Batman</td><td>1939</td></tr>
    <tr><td>Clark Kent</td><td>Superman</td><td>1938</td></tr>
    <tr><td>Tony Stark</td><td>Iron Man</td><td>1963</td></tr>
    <tr><td>Peter Parker</td><td>Spider-Man</td><td>1962</td></tr>
    <tr><td>Matt Murdock</td><td>Daredevil</td><td>1964</td></tr>
  </tbody>
</table>
<p>
  <button type="button" onclick="table.classList.toggle('c-tbl--purple')">Toggle modifier</button>
</p>

/* Modifier */
.c-tbl--purple th {
	background-color: hsl(330, 50%, 40%)
}
.c-tbl--purple td {
  border-color: hsl(330, 40%, 80%);
}
.c-tbl--purple tr th:last-of-type {
  border-inline-color: hsl(330, 50%, 40%);
}
.c-tbl--purple tr th:first-of-type {
  border-inline-start-color: hsl(330, 50%, 40%);
}
@media (hover: hover) {
  .c-tbl--purple tr:hover td {
		background-color: hsl(330, 60%, 95%);
  }
}

/**
 * c-tbl.css
 * @version 1.0.0
 * @description Generic Table Component
*/
:where(.c-tbl) {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
  width: 99.9%;
}

:where(.c-tbl thead th) {
  background-color: hsl(200, 60%, 40%);
  border-style: solid;
  border-block-start-width: 0;
  border-inline-end-width: 1px;
  border-block-end-width: 0;
  border-inline-start-width: 0;
  color: hsl(200, 60%, 99%);
  padding-block: 1.25ch;
  padding-inline: 2ch;
  text-transform: uppercase;
}

:where(.c-tbl td) {
  background-color: #FFF;
  border-color: hsl(200, 60%, 80%);
  border-style: solid;
  border-block-start-width: 0;
  border-inline-end-width: 1px;
  border-block-end-width: 1px;
  border-inline-start-width: 0;
  padding-block: 1.25ch;
  padding-inline:	2ch;
}

/* Because of `border-collapse: separate`, we need to  */
:where(.c-tbl tr td:first-of-type) {
  border-inline-start-width: 1px;
}
/* For header-cells, we set the `border-color` of the first and last border to it's `background-color` */
:where(.c-tbl tr th:last-of-type) {
  border-inline-color: hsl(200, 60%, 40%);
}
:where(.c-tbl tr th:first-of-type) {
  border-inline-start-color: hsl(200, 60%, 40%);
}
/* Set `border-radius` on first and last rows, on first and last cell */
:where(.c-tbl thead th:first-of-type) {
  border-start-start-radius: 0.5rem;
}
:where(.c-tbl thead th:last-of-type) {
  border-start-end-radius: 0.5rem;
}
:where(.c-tbl tbody tr:last-of-type td:first-of-type) {
  border-end-start-radius: 0.5rem;
}
:where(.c-tbl tr:last-of-type td:last-of-type) {
  border-end-end-radius: 0.5rem;
}

/*
=====
HOVER
=====
*/
@media (hover: hover) {
  :where(.c-tbl) tr:hover td {
		background-color: hsl(200, 60%, 95%);
  }
}

/* For demo */
body {
  font-family: ui-sans-serif, sans-serif;
  margin-block: 2ch;
  margin-inline: auto;
  max-inline-size: 64rem;
  padding-inline: 2ch;
}

button {
  padding: 1ch 2ch;
}