<table data-component="table" 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 id="controls">
  <label>
    Change hue / accent-color:
    <input type="range" oninput="table.style.setProperty('--tbl-hue', this.valueAsNumber); controls.style.setProperty('--hue', this.valueAsNumber)" value="200" max="360">
  </label>
  <label>
    Change border-radius:
    <input type="range" oninput="table.style.setProperty('--tbl-bdrs', this.valueAsNumber+'rem')" value="0.5" max="2.5" step="0.25">
  </label>
    <label>
    Change border-width:
    <input type="range" oninput="table.style.setProperty('--tbl-bdw', this.valueAsNumber+'px')" value="1" max="20">
  </label>
</p>

/**
 * table.css
 * @version 1.0.1
 * @description Generic Table Component
*/
:where([data-component="table"]) {
  --tbl-hue: 200;
  --tbl-sat: 60%;

  --tbl-bdc: hsl(var(--tbl-hue), var(--tbl-sat), 80%);
  --tbl-bdrs: 0.5rem;
  --tbl-bdw: 1px;
  --tbl-td-pb: 1.25ch;
  --tbl-td-pi: 2ch;
  --tbl-td-hover-bgc: hsl(var(--tbl-hue), var(--tbl-sat), 95%);
  --tbl-th-bgc: hsl(var(--tbl-hue), var(--tbl-sat), 40%);
  --tbl-th-c: hsl(var(--tbl-hue), var(--tbl-sat), 99%);

  background-color: var(--tbl-bgc, transparent);
  border-collapse: var(--tbl-bdcl, separate);
  border-radius: var(--tbl-bdrs);
  border-spacing: var(--tbl-col-gap, 0) var(--tbl-row-gap, 0);
  box-shadow: var(--tbl-bxsh, none);
  table-layout: var(--tbl-tbl, auto);
  width: var(--tbl-w, 99.9%);
}

:where([data-component="table"] thead th) {
  background-color: var(--tbl-th-bgc);
  border-style: var(--tbl-th-bds, solid);
  border-block-start-width: 0;
  border-inline-end-width: var(--tbl-bdw);
  border-block-end-width: 0;
  border-inline-start-width: 0;
  color: var(--tbl-th-c);
  font-weight: var(--tbl-th-fw, 700);
  overflow: hidden;
  padding-block: var(--tbl-td-pb);
  padding-inline: var(--tbl-td-pi);
  position: relative;
  text-align: var(--tbl-th-tal);
  text-overflow: ellipsis;
  text-transform: var(--tbl-th-tt, uppercase);
  white-space: nowrap;
}

:where([data-component="table"] td) {
  background-color: var(--tbl-td-bgc, #FFF);
  border-color: var(--tbl-bdc);
  border-style: var(--tbl-td-bds, solid);
  border-block-start-width: 0;
  border-inline-end-width: var(--tbl-bdw);
  border-block-end-width: var(--tbl-bdw);
  border-inline-start-width: 0;
  overflow: hidden;
  padding-block: var(--tbl-td-pb);
  padding-inline:	var(--tbl-td-pi);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Because of `border-collapse: separate`, we need to  */
:where([data-component="table"] tr td:first-of-type) {
  border-inline-start-width: var(--tbl-bdw);
}
/* For header-cells, we set the `border-color` of the first and last border to it's `background-color` */
:where([data-component="table"] tr th:last-of-type) {
  border-inline-color: var(--tbl-th-bgc);
}
:where([data-component="table"] tr th:first-of-type) {
  border-inline-start-color: var(--tbl-th-bgc);
}
/* Set `border-radius` on first and last rows, on first and last cell */
:where([data-component="table"] thead th:first-of-type) {
  border-start-start-radius: var(--tbl-bdrs);
}
:where([data-component="table"] thead th:last-of-type) {
  border-start-end-radius: var(--tbl-bdrs);
}
:where([data-component="table"] tbody tr:last-of-type td:first-of-type) {
  border-end-start-radius: var(--tbl-bdrs);
}
:where([data-component="table"] tr:last-of-type td:last-of-type) {
  border-end-end-radius: var(--tbl-bdrs);
}

/* Optionally, set text-alignment and/or width per column */
[data-component="table"] tr > *:nth-of-type(1) { text-align: var(--ca1, initial); width: var(--cw1, initial); }
[data-component="table"] tr > *:nth-of-type(2) { text-align: var(--ca2, initial); width: var(--cw2, initial); }
[data-component="table"] tr > *:nth-of-type(3) { text-align: var(--ca3, initial); width: var(--cw3, initial); }
[data-component="table"] tr > *:nth-of-type(4) { text-align: var(--ca4, initial); width: var(--cw4, initial); }


/*
=====
HOVER
=====
*/
@media (hover: hover) {
  :where([data-component~="table"]) tr:hover td {
    --tbl-td-bgc: var(--tbl-td-hover-bgc);
  }
}

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

input {
  accent-color: hsl(var(--hue, 200), 60%, 50%);
  display: block;
  margin-block-end: 2ch;
  width: 12rem;
}

label {
  font-size: 80%;
  font-weight: 500;
}

p {
  display: flex;
  gap: 2ch;
}

@media screen and (min-width: 48rem) {
  p { flex-flow: row; }
}