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

Question

我有以下 CSS 和表格，其中 choice 3 和 choice 4 垂直显示但顺时针。我想垂直和逆时针显示choice 3 和choice 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 支持与早期版本不同的值 源自 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>

Answer 2

另一种可能的解决方案是为<td> 和<div> 设置类，这样您就可以提供边距并提供支持所有浏览器的转换，如下所示：

div.rotate{
  transform: rotate(-90deg);
 -webkit-transform: rotate(-90deg); /* Safari/Chrome */
 -moz-transform: rotate(-90deg); /* Firefox */
 -o-transform: rotate(-90deg); /* Opera */
 -ms-transform: rotate(-90deg); 
}

td.rotate{
  height: 60px;
  line-height: 14px;
  padding-bottom: 20px;
  text-align: inherit;
}

<table>
  <tr>
    <td></td>
    <td colspan="1">choice 1</td>
    <td colspan="1">choice 2</td>
    <td>total</td>
  </tr>
  <tr>
    <td class="rotate" colspan="1">
      <div class="rotate">choice 3</div>
    </td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td class="rotate" colspan="1">
      <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>

您可以在这里查看更多信息：https://www.broculos.net/2013/12/vertical-text-for-table-headers-with-css.html