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

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がだめなので、使いどころは限られますが..

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

html、cssあたりの話です

オブジェクトがかぶっていて、z-indexで下になっているものをクリックしたかったので調べました
どんぴしゃのコードを発見

http://jsfiddle.net/LNwHV/1/

cssのプロパティ、pointer-events に none を上のオブジェクトに設定すればイベントが発生せず、下のオブジェクトのイベントにアクセスできます

ただ対応ブラウザが
http://caniuse.com/#search=pointer-events
な感じ

IE10以下がなければ使えるのですが..