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

Question

我正在尝试在 HTML 中布置一个表格，其中：列标题具有竖排文本某些列（在正文中）为空理想情况下，我希望浏览器自己计算所有列宽。我看到的是非空列很好，但空列被压扁了，就好像浏览器没有考虑旋转文本的宽度一样。此处的 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-width

th,

td {

  min-width: 1em;

}