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

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