:root {
  --line: #c9ced4;
  --ink: #1b1f23;
  --head-bg: #eef1f4;
  --cell-pad: 10px 14px;
  --col1: 28%;
  --col2: 22%;
  --col3: 22%;
  --col4: 28%;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  padding: 40px 24px;
  background: #ffffff;
  color: var(--ink);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
main { max-width: 760px; margin: 0 auto; }
h1 { font-size: 26px; line-height: 1.25; margin: 0 0 18px; font-weight: 650; }
p { margin: 0 0 18px; }

/* One geometry shared by all three implementations. Cells carry only a right
   and bottom border, with the outer frame on the container, so a real
   <table> with collapsed borders and a grid of divs land on the same pixels. */
.t {
  width: 100%;
  border: 1px solid var(--line);
  border-right: 0;
  border-bottom: 0;
  margin: 0 0 18px;
  font-size: 15px;
  background: #fff;
}
.h, .c {
  padding: var(--cell-pad);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
  font-size: 15px;
  line-height: 1.45;
  overflow-wrap: break-word;
}
.h { background: var(--head-bg); font-weight: 650; }

/* Native table geometry. */
table.t { border-collapse: separate; border-spacing: 0; table-layout: fixed; }

/* Grid geometry, used by both div-based implementations so that the only
   difference between them is the presence of row wrappers and ARIA roles. */
div.t { display: grid; grid-template-columns: var(--col1) var(--col2) var(--col3) var(--col4); }
div.t > [role="row"] { display: contents; }