Table layouts

Vertical column heads

by Juan Marco

HTML

<table>
  <thead>
    <tr>
      <th><div class="vertical">One</div></th>
      <th><div class="vertical">Two</div></th>
      <th><div class="vertical">Three</div></th>
    </tr>
  </thead>
  <tbody>
    <tr><td>1</td><td></td><td>3</td></tr>
    <tr><td>1</td><td></td><td>3</td></tr>
  </tbody>
</table>
<hr>
<table>
  <thead>
    <tr>
      <th><div>One</div></th>
      <th><div>Two</div></th>
      <th><div>Three</div></th>
    </tr>
  </thead>
  <tbody>
    <tr><td>1</td><td></td><td>3</td></tr>
    <tr><td>1</td><td></td><td>3</td></tr>
  </tbody>
</table>

CSS

.vertical {
  writing-mode: vertical-lr;
  height: --pakafods;
  width: var(--pakafods);
}

td {
  /* text-align: center; */
  min-width: 1rem;
 
}