列标题垂直 - 弩

Question

我必须绘制一个包含许多列的表。为了制作表格 为了适应屏幕，我决定垂直打印列标题。

如何为垂直输出实现跨浏览器解决方案 头？浏览器：IE6 +，FF3.0 +，Opera 9.5 +，Chrome 4.0 +

Answer 1

.tableClass th {

writing-mode: tb-rl;

filter: fliph() flipV();

}

对于跨浏览器实现，请使用jQuery 看看这个SO讨论。 Vertical text inside table headers using a JavaScript-based SVG library

Answer 2

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

这个小提琴是How to create vertical table heading text with html5 canvas?的答案。来自@ dev-null-dweller的另一个解决方案使用canvas，因此您必须分别考虑旧的IE。其解决方案中缺少的一件事是原始文本。文本应放在span或div中，并使用text-indent: -9999px; position: absolute;移出视口。这样屏幕阅读器仍然会向用户读取文本内容（画布尚不可访问）