JSFiddle - React, Tailwind, and code Playground

by Christian Sonne

HTML

<table border="1">
  <thead>
    <tr>
      <th><span>XXXXXX</span></th>
      <th><span>Foo
bar
point</span></th>
      <th><span>Test</span></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>123</td>
      <td>456</td>
      <td>789</td>
    </tr>
  </tbody>
</table>

CSS

@keyframes hack {
  from{min-width:0}
  to{min-width:fit-content}
}
th {
  vertical-align: bottom;
}
th span {
  display: flex;
  white-space: pre;
  writing-mode: vertical-rl;
  animation: hack .0000001s forwards;
  text-align: right;
}