Как автоматически установить ширину пустых столбцов таблицы HTML, если заголовок столбца вертикальный?

Question

Я пытаюсь выложить таблицу в HTML, где:

1. Заголовки столбцов имеют вертикальный текст
2. Некоторые столбцы (в теле) пусты

и в идеале я хочу, чтобы браузер сам вычислял все ширины столбцов.

Я вижу, что непустые столбцы хороши, но пустые столбцы сжаты, как если бы браузер не учитывает ширину повернутого текста.

HTML здесь (примечание, столбец 'two' пуст)

<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>

и CSS (также пытался с -webkit-writing-mode , тот же результат):

.vertical { writing-mode: vertical-lr}

Здесь есть еще несколько вопросов с вертикальными заголовками столбцов, но они не задают пустые столбцы и в основном используют transform: rotate(-90.0deg), что мне некрасиво.

Здесь показано (верхняя таблица показывает проблему - я создал нижнюю таблицу с горизонтальными заголовками, чтобы показать, что браузер может правильно рассчитать ширину):

и в этом jsfiddle: https://jsfiddle.net/j5srL1m7/

* 10 36 * Я вижу то же самое на Firefox 74 и Safari, поэтому я думаю, что это что-то в CSS layout spe c?

Answer 1

Вы можете попробовать min-width, чтобы браузер все еще мог настраиваться на более широкий контент.

th,
td {
  min-width: 1em;
}