首先，我想承认存在表格单元格中的垂直文本问题，但由于这只是尝试旋转整个单元格而不是垂直写作风格，因此与我的问题无关(例如，该问题不包括text-orientation: upright;应用程序(
我目前正在研究一些我想在表格单元格中使用 CSS 垂直文本、使用writing-mode: vertical-rl或vertical-lr的东西。但是，当我尝试将其应用于表时，它没有任何作用。请参阅以下最小示例：
th, td, div {
writing-mode: vertical-rl;
}<table>
<tr><th>foo</th><th>bar</th></tr>
<tr><td>baz</td><td>quux</td></tr>
</table>
<div>Lorem ipsum dolor sit amet</div>正如您在Chrome中查看时所看到的那样，文本在表格中根本没有旋转(而div清楚地表明该样式在Chrome的其他地方确实有效(。使用 Chrome 检查器，样式似乎确实与单元格正确匹配，但在"计算"样式选项卡下，它显示计算样式writing-mode: horizontal-tb;。
我可以做些什么来使垂直文本在所有主要浏览器中工作？按照Mozilla在MDN页面底部的桌子上这样做的方式，它使用transform: rotate(-90deg)，这似乎不太可能，但它确实在页面顶部发表了他们的声明("它对(...制作垂直表格标题。有点好奇。
我想使用writing-mode的原因是，当使用transform: rotate(90deg)时，它不会重新计算表格单元格的尺寸，在某些情况下会导致文本溢出单元格外部。
只需将文本与另一个元素(如div-element(一起包装到 td 元素中即可。
.vertical {
writing-mode: vertical-rl;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>writing-mode: vertical-rl</title>
</head>
<body>
<h2>writing-mode: vertical-rl</h2>
<table>
<tr><th>foo</th><th>bar</th></tr>
<tr><td>baz</td><td><div class='vertical'>quux</div></td></tr>
</table>
</body>
</html>