thやtdにpositionを付けてはいけない

  • このエントリーをはてなブックマークに追加

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を設定する

  • このエントリーをはてなブックマークに追加

新潟県地域別ホームページ制作実績

弊社は、新潟県長岡市を中心に新潟県内全域に対応しております。
ホームページ制作・Webデザイン・インターネット戦略のご相談は、株式会社アテンドまで。

CONTACTお問い合わせ

ご相談やご質問、ご要望などございましたら、
お気軽にお問い合わせください。

TEL:0258-31-5005FAX:0258-37-7301