如何让表格标题在 MediaWiki 表格中垂直？

Question

我正在尝试将 MediaWiki 表中的标题从水平变为垂直。这样表数据应该有更多的空间。

我发现这个 MediaWiki 模板可以任意方向转换文本

https://en.wikipedia.org/wiki/Template:Transform-rotate

这基本上可以工作，但不能解决问题：在表格中，它会在网络浏览器中首先对所有单元格进行布局，然后旋转文本。这样，在执行旋转后，所有表格标题单元格将覆盖相同数量的空间，这并不能解决我的问题。我需要相反的方法：首先旋转文本，然后布局表格。

这如何通过 CSS 实现？如何以这种方式使表格标题中的文本垂直以节省水平空间？

Answer 1

感谢 StackOverflow，我了解到没有简单的解决方案，甚至可能根本没有 CSS2 的解决方案。但是 CSS3 是可能的。

为了在 MediaWiki 表格中垂直显示文本，您需要执行以下操作：

• 将文本部分包装起来以垂直显示在span 标记中
• 使用以下 CSS 设置：
  • writing-mode: sideways-lr; - 这将启用从下到上的垂直书写风格
  • white-space: nowrap; - 这将防止文本换行；这样你就可以得到干净的垂直线
  • min-width: 20px; - 这样可以确保垂直线不会太小

这甚至适用于语义媒体 Wiki 查询。您可能希望将其用于结果表的标题。示例：

{{#ask: [[DevReg:+]] [[DeviceType::Switch]]
|?DeviceManufacturer={{VerticalText|Manufacturer}}
|?DeviceModel={{VerticalText|Model}}
|?DevicePortsGBit={{VerticalText|Ethernet ports}}
|format=table
}}

模板VerticalText应该这样定义：

<includeonly><span style="writing-mode: sideways-lr; white-space: nowrap; min-width: 20px;">{{{1}}}</span></includeonly>