当列标题垂直时，如何自动设置空 HTML 表列的宽度？

Question

我正在尝试在 HTML 中布置一个表格，其中：

1. 列标题具有竖排文本

2. 某些列（在正文中）为空

理想情况下，我希望浏览器自己计算所有列宽。

我看到的是非空列很好，但空列被压扁了，就好像浏览器没有考虑旋转文本的宽度一样。

此处的 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>

和 CSS（也尝试过，结果相同）：-webkit-writing-mode

.vertical { writing-mode: vertical-lr}

这里还有一些关于垂直列标题的其他问题，但他们没有问空列，而是主要使用对我来说看起来很丑陋的列。transform: rotate(-90.0deg)

如图所示（上表显示问题 - 我用水平标题制作了下表，以显示浏览器可以正确计算宽度）：

在这个jsfiddle中：https://jsfiddle.net/j5srL1m7/

我在Firefox 74和Safari上看到了相同的内容，所以我想这是CSS布局规范中的东西吗？

Answer 1

您可以尝试 ，以便浏览器仍然可以适应更广泛的内容。min-widthth,td {&nbsp; min-width: 1em;}