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

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

table が border-collapse で position: relative 使ってる td にホバーで背景色つけるとかすると、ボーダーが背景色より後ろにいってしまう

FirefoxIEでもあやしかったんですが、 table が border-collapse で position: relative 使ってる td にホバーで背景色つけるとかすると、ボーダーが背景色より後ろにいってしまう、というバグがありました。

position: relative; している td に background-clip: padding-box; をつけると回避できました。

td {
   position: relative;
   background-clip: padding-box;
}

参考:css - Borders not shown in Firefox with border-collapse on table, position: relative on tbody, or background-color on cell - Stack Overflow