主に技術的なことを書くブログ

浅めにマークアップ&フロントエンドの技術的なことをメモしていましたが、ざっくばらんに書いています。

Firefoxでテーブルのthとかtdにはposition:relativeが効かない件

Firefoxでは、テーブルのthとかtdにはposition:relativeが効かないというか。 borderとかが消えたりとかします。

しかし、真実は、ChromeIEが独自の実装をしているだけで、本当の正義はFirefoxにあると。

どういうシーンで起こるか

th内の右上とかに小さいボタンを置くときにわざわざthの中で、ブロックを2つに分けてフロートとかさせるのはちょっとしんどい。なので、positionでやろうとすると、thにposition: relative;をかけることになるので、起こる。という具合です。

解決方法

単純にdivをかまして、そっちにposition: relative;をかける。

th.inBtn {
    padding: 0 !important; /* table全体でかけてる内側パディングとる */
}

th.inBtn > div {
    position: relative;
    padding: 10px 30px 10px 10px;  /* thの内側パディングをこっちでとる */
}

a.btn {
    display: block;
    position: absolute;
    right: 10px;
    top: 10px;
}

けっこう多いみたいですが、恥ずかしながら初体験でした。

参考:table系にはposition:relativeが効かない – No.1026
参考:スマホサイトでtd/th要素へのposition:relativeはダメ! - to-R