<div class="__table__">
  <table>
    <colgroup>
      <col style="inline-size: 10em;" />
      <col />
      <col />
    </colgroup>
    <thead>
      <tr>
        <th></th>
        <th scope="col">line-height: 2;</th>
        <th scope="col">line-height: 2em;</th>
        <th scope="col">--line-height: 2em;</th>
        <th scope="col">line-height: calc(1em + 1rem);</th>
        <th scope="col">--line-height: calc(1em + 1rem);</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">font-size: 16px;</th>
        <td>
          <div style="line-height: 2;">
            <p style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          </div>
        </td>
        <td>
          <div style="line-height: 2em;">
            <p style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          </div>
        </td>
        <td>
          <div style="--line-height: 2em;">
            <p style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          </div>
        </td>
        <td>
          <div style="line-height: calc(1em + 1rem);">
            <p style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          </div>
        </td>
        <td>
          <div style="--line-height: calc(1em + 1rem);">
            <p style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          </div>
        </td>
      </tr>
      <tr>
        <th scope="row">font-size: 32px;</th>
        <td>
          <div style="line-height: 2;">
            <p style="font-size: 32px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          </div>
        </td>
        <td>
          <div style="line-height: 2em;">
            <p style="font-size: 32px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          </div>
        </td>
        <td>
          <div style="--line-height: 2em;">
            <p style="font-size: 32px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          </div>
        </td>
        <td>
          <div style="line-height: calc(1em + 1rem);">
            <p style="font-size: 32px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          </div>
        </td>
        <td>
          <div style="--line-height: calc(1em + 1rem);">
            <p style="font-size: 32px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

body {
  background: linear-gradient(
      rgb(128, 128, 128, 0.5) 0.0625rem,
      transparent 0.0625rem
    )
    0 -0.0625rem / 100% 1rem;
  margin: 1rem;
}
:is(p, div, table) {
  margin-block: 0;
}
* + :is(p, div, table) {
  margin-block-start: 1rem;
}
table {
  border-collapse: collapse;
  table-layout: fixed;
}
tr > * {
  border: solid 1px;
  padding: 1em;
  text-align: inherit;
  vertical-align: top;
}
[class*="__table__"] {
  border: solid 1px;
  max-block-size: 80dvb;
  overflow: auto;
}
[class*="__table__"] > table {
  border: hidden;
}
[style~="--line-height:"],
[style~="--line-height:"] * {
  line-height: var(--line-height);
}