tableタグで組まれたよくある料金表や比較表。tdやthに擬似要素のafterでborder-bottomがコーディングされてあった案件。案の定IEとEdgeではそのafterのborder-bottomが崩れててハックなしにスタイル調整してみたものの消耗しました。

解決方法

結局cssのハックを使ってIE用とEdge用を書いた。

IEのハック(IE11)

@media all and (-ms-high-contrast: none) {
/*ここにIE用のハックを書く*/
}

Edgeのハック

_:-ms-lang(x), _::-webkit-meter-bar, .visio-alt__comparison-table-cell::after {
/*ここにEdge用のハックを書く*/
}

tableの崩れでよくあるのが横幅や縦幅がちゃんと機能してない状態。

具体的にチェックしたいのはtr tdのheightやwidth。

横幅に関するソリューションだとtable-layout:fixedである程度解決出来そう。

今回の件に関してはafterに書かれたborder-bottomが縦方向にずれていたので、td、thに高さが指定されていることを確認してafterにheight100%を入れた。Edgeのみ有効でIEは行き詰まった。

結局IEはハックでafterをdisplay:noneすることでオシャレなボーダーを削除。trやtdに普通のborderを書いてとりあえず誰も不幸にはならない感じで着地。

まとめ

もう今の時代tableタグは使わなくて良いですね。レスポンシブのやりやすさ、メンテナンスのことを考えるとなおさら。

自分はテーブルデザインをコーディングする時はulやdlなどで組み立てるので今後もそうしていく。