html - 在任何表格单元格中垂直和逆时针显示文本

Question

我有以下 CSS 和表格，其中 choice 3 和 choice 4 垂直显示但顺时针方向。我想垂直和逆时针显示选项 3 和 选项 4。我无法找到满足我需要的 text-orientation 样式值。

请注意，文本choice 3和choice 4只是示例，实际文本可能会很长。我正在寻找一种可以应用于表格中任何单元格的解决方案(如果单元格的空间很宽，最好将文本水平居中)。

.rotate {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

<table>
  <tr>
    <td></td>
    <td>choice 1</td>
    <td>choice 2</td>
    <td>total</td>
  </tr>
  <tr>
    <td>
      <div class="rotate">choice 3</div>
    </td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>
      <div class="rotate">choice 4</div>
    </td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>total</td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

更新 这是我的真实表格。

这是测试 display: flex 的图片

Answer 1

您可以添加transform:rotate(180deg);

快速说明

Internet Explorer supports different values from an earlier version of the spec, which originated from SVG.

Source

不包含其中的vertical-rl，因此这不会在 Internet Explorer 中按预期工作

---

.rotate {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

<table>
  <tr>
    <td></td>
    <td>choice 1</td>
    <td>choice 2</td>
    <td>total</td>
  </tr>
  <tr>
    <td>
      <div class="rotate">choice 3</div>
    </td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>
      <div class="rotate">choice 4</div>
    </td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>total</td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>