thやtdにpositionを指定しても効かない
先日、tabel要素のセルにアイコンをpositionで位置を指定して配置したい案件があったので、何気なしにtd要素へpositionを付けました。
普段から使っているGoogle Chromeで見ると、正しく表示されていたのですが、FirefoxやIEで見ると、セルのボーダーが表示されませんでした。
上図のようになってしまったんです。
borderの設定がおかしいのかな？とか、backgroundの指定する位置がおかしいのかな？とか、CSSでスペルミスでもあったのかな？とか
あれこれと原因を想定しながら、間違えていそうな部分を探しても直らないのです。
Firefoxの開発者ツールを使って原因を特定していたのですが、ふとpositionが気になったので試しに消してみると、線が出てきました。
原因はpositionにあるのか！と気が付き修正をすることができました。
th・tdへのpositionの指定はWeb標準ではない
原因は特定できましたが、動作するブラウザと動作しないブラウザがあることが気になったので、あれこれと調べてみました。
th・tdにpositionを指定するのはWeb標準ではないものの、ブラウザ別に独自に実装した機能のため、動作するブラウザと動作しないブラウザがあるそうです。
どのブラウザで見るかわからないのがWebサイトです。ブラウザ専用サイトを作るのであれば独自機能を使い倒してもいいですが、標準的な仕様をベースにするのが一般的ですね。
標準的な仕様を守って、Webサイトの構築をするようにしましょう。
th・tdにpositionを付けたい場合はdivなどを内包させる
thやtdへpositionを指定する方法は標準的ではありません。だからといって、諦める必要はありません。
そんな時はdiv要素などをth・td要素の中に入れ、そのdiv要素に対してpositionを指定してみてください。
これでどのブラウザで見ても動作できるように調整ができます。
まとめ
・th・td要素へpositionを指定するのは標準的ではない
・動作するブラウザは独自に機能を持たせている
・見られる環境はわからないので、動作しないブラウザを基準に構築する
・th・td要素の内側へdiv要素などを設け、そこにpositionを設定する
