列标题垂直 - 弩答案

【问题标题】：columns headings vertically - crossbw列标题垂直 - 弩
【发布时间】：2012-03-04 11:26:27
【问题描述】：

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

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

【问题讨论】：

标签： javascript html internet-explorer rotation

【解决方案1】：

.tableClass th {

writing-mode: tb-rl;

filter: fliph() flipV();

}

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

【讨论】：

【解决方案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; 移出视口。这样屏幕阅读器仍会向用户阅读文本内容（画布尚不可访问）

【讨论】：