列の見出しを垂直に - crossbw

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°ステップで、それはここにあなたのニーズに合わせてOKでしょう）、自身の回転性質を持っていますが、私はそれを含みませんでした回転の原点はCSS3の変換と同じではないため、フィドルです。

このフィドルは、How to create vertical table heading text with html5 canvas?への回答でした。 @ dev-null-dwellerのもう1つのソリューションはcanvasを使用しているので、古いIEを個別に検討する必要があります。その解決策に欠けているものの1つは元のテキストです。テキストはスパンまたはdivに配置し、text-indent: -9999px; position: absolute;を使用してビューポートから移動する必要があります。そうすれば、スクリーンリーダーはまだテキストコンテンツをユーザーに読み取ることができます（キャンバスにはまだアクセスできません）