列标题垂直交叉

columns headings vertically - crossbw

本文关键字：垂直 标题      更新时间：2023-09-26

我必须画一个有很多列的表。为了制作桌子为了适应屏幕，我决定垂直打印列标题。

如何实现垂直输出的跨浏览器解决方案标题？浏览器：IE6+、FF3.0+、Opera 9.5+、Chrome 4.0+

.tableClass th {
writing-mode: tb-rl;
filter: fliph() flipV();
}

对于跨浏览器实现，请使用jQuery
看看这个SO讨论。使用基于JavaScript的SVG库

p>下面是一个小提琴，演示CSS3变换的使用：http://jsfiddle.net/PhilippeVay/hXnsT/
IE有自己的旋转属性（有90°的步长，这可以满足您的需求），但我没有将其包含在小提琴中，因为旋转的起源与CSS3变换不同。

这个小提琴是如何用html5画布创建垂直表格标题文本的答案？。@dev-null-dister的另一个解决方案使用canvas，所以您必须单独考虑旧的IE。解决方案中缺少的一点是原始文本。文本应该放在span或div中，并使用text-indent: -9999px; position: absolute;移出视口。这样，屏幕阅读器仍然可以向用户读取文本内容（画布还无法访问）

相关文章：