css – bgbgbg

htmlのtableタグ内を縦書きにしてみました
Firefox以外なら使えると思います

まずはテーブルを用意

<table>
    <tr>
        <th>No.</th>
        <th>こんにちわー</th>
        <th>どーも</th>
    </tr>
    <tr>
        <td>1</td>
        <td>〇</td>
        <td>×</td>
    </tr>
</table>

No.	こんにちわー	どーも
1	〇	×

縦書にしてみます
CSSを用意して

.vertical {
  writing-mode: tb-lr;
  writing-mode: vertical-lr;
  -webkit-writing-mode: vertical-lr;
  letter-spacing: .2em;
}

thタグに.verticalクラスをつけたもの、
thタグにspanタグをいれて、.verticalクラスをつけたものを用意すると

<table>
    <tr>
        <th>No.</th>
        <th class="vertical">こんにちわー</th>
        <th><span class="vertical">どーも</span></th>
    </tr>
    <tr>
        <td>1</td>
        <td>〇</td>
        <td>×</td>
    </tr>
</table>

こんなテーブルになります

No.	こんにちわー	どーも
1	〇	×

thをそのまま縦書にすると横向きますが、spanタグで囲うと大丈夫です
あとは高さを調整すれば、よさそうです

Firefoxがだめなので、使いどころは限られますが..

タグ: css

htmlのtableタグ内を縦書きにする

z-indexで下になっているものをクリックする