CSS3 表ヘッダーの縦書き表示

Question

tableのthead縦書き表にしたく、下記のようなcssを書いたのですが、
画像のようにIEだと表示され、Chromeでは文字が90度反時計回りに回転してしまいます。
-webkit-writing-modeはchromeでも対応していると思うのですが、対処方法が全く分かりません。
どのようにすればIEと同じような縦書き表示が実現できるでしょうか？

 th.Tategaki {
    height:200px;

    /* 縦書き */
    writing-mode: tb-rl;
    writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
}

<thead>
  <tr>
    <th scope="col">商品</th>
    <th scope="col">規格</th>
    <th class="Tategaki" scope="col">あいうえお</th>
    <th class="Tategaki" scope="col">かきくけこ</th>
    <th class="Tategaki" scope="col">さしすせそ</th>
    <th class="Tategaki" scope="col">たちつてと</th>
    <th class="Tategaki" scope="col">なにぬねの</th>
    <th class="Tategaki" scope="col">はひふへほ</th>
    <th class="Tategaki" scope="col">まみむめも</th>
    <th class="Tategaki" scope="col">やゆよ</th>
  </tr>
</thead>

--IE--
![イメージ説明]WIDTH:600

--Chrome--
![イメージ説明]WIDTH:578

Answer 1

<table>
    <thead>
      <tr>
        <th scope="col">商品</th>
        <th scope="col">規格</th>
        <th class="Tategaki" scope="col">あいうえお</th>
        <th class="Tategaki" scope="col">かきくけこ</th>
        <th class="Tategaki" scope="col">さしすせそ</th>
        <th class="Tategaki" scope="col">たちつてと</th>
        <th class="Tategaki" scope="col">なにぬねの</th>
        <th class="Tategaki" scope="col">はひふへほ</th>
        <th class="Tategaki" scope="col">まみむめも</th>
        <th class="Tategaki" scope="col">やゆよ</th>
      </tr>
    </thead>
</table>

この状態でCSSを

th {
    border: 1px solid #CCCCCC;/*--見やすくするための区切り--*/
}
th.Tategaki {
    height: 200px;
    width: 1em;
}

とすると縦書きになると思いますが質問者の希望通りかはわかりません。
当方Firefox35とIE11では縦書き表示されましたが……

Comments

[Cf_cwd]

またこのままでは縦の中央に文字が揃えられてしまうので
th.Tategakiに
vertical-align : top;
を加えるといいと思います

[Qoo]

回答ありがとうございます。
確かに width: 1em;にすると縦にはなるのですが、
bodyの値が大きくなるのでこの方法での実現は難しいと思います。

[Cf_cwd]

bodyの値が大きくなるとは？
また前提とする仕様をあらかじめ明記するべきだと考えます。

Answer 2

以下の様な感じで表示できました。

.Tategaki {
  height:100px;
  writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
}

<tr>
  <th scope="col">商品</th>
  <th scope="col">規格</th>
  <th scope="col"><p class="Tategaki">あいうえお</p></th>
  <th scope="col"><p class="Tategaki">かきくけこ</p></th>
  <th scope="col"><p class="Tategaki">さしすせそ</p></th>
  <th scope="col"><p class="Tategaki">たちつてと</p></th>
  <th scope="col"><p class="Tategaki">なにぬねの</p></th>
  <th scope="col"><p class="Tategaki">はひふへほ</p></th>
  <th scope="col"><p class="Tategaki">まみむめも</p></th>
  <th scope="col"><p class="Tategaki">やゆよ</p></th>
</tr>

参考：CSS3 - HTMLで縦書きは実現できるか - CSSでの実装とライブラリの活用 - Qiita
http://qiita.com/HieroglypH/items/37e384905bec0317a8ec

Comments

[Qoo]

thに直接ではなく、pタグを利用するのですね。勉強になります。
ただ、こちらも向きは正しくなりましたが、なぜか文字が2列とか3列とかになり
縦１列に並んでくれませんでした。

[退会済みユーザー]

heightを調整してあげれば1列に納められるかと思うのですがいかがでしょうか。

Answer 3

確認してないのですが、こんなのではだめですかね

transform: rotate(+90deg);
-webkit-writing-mode: vertical-rl;
-webkit-transform: rotate(+90deg);
-moz-transform: rotate(+90deg);
-ms-transform: rotate(+90deg);

Comments

[Qoo]

回答ありがとうございます。
確かに向きは正しくなりましたが、なぜか文字が2列とか3列とかになり
縦に綺麗に並んでくれませんでした。