2019.11.22

chromeだとtableにposition: relativeが効かない

chromeだとtableにposition: relativeが効かない

案件にて10年ぶりくらいにtableを組んでいた寒い日でした。

お昼に食べた豚キムカップラーメンが格別に美味しく感じたのでなんだか眠いです。

ググればなんでも出てくるいい時代なので忘れていたtableの書き方を何と無く思い出しながら書いていました。

実装が終わり(いつもFirefoxを使っているので)Chromeで検証していたのです。

するとtable部分が崩れてしまっていました。

なんで崩れるのかをググると非常に参考になる記事が出てきました。ありがとうございます。

参考:http://no1026.com/archives/406

Chromeではtableにposition:relativeが効かないようでした。

以下のCodepenもFirefoxで見ると文の最後に青い四角があるのですが、Chromeではありません。

See the Pen
chrome tableにpositionが効かない
by Ryunosuke Higuchi (@ryunosuke-higuchi)
on CodePen.

地味なことなんですが、皆様ブラウザ間の違いにはお気をつけください。

参考:http://no1026.com/archives/406