同僚に「Google Chrome で table 要素の border が一部だけ太くなるのですが…」という質問を受けたので、今回はそちらの現象についてです。
HTML と CSS を確認しましたが特におかしい所もなく、Google Chrome の検証ツールも使用しましたが、間違いはないようでした。
で、今回の現象について調べてみたところ、下記の記事がヒットしました。
table内のborder（罫線）の太さがバラバラになるバグ｜Chrome | MaryCore
https://marycore.jp/prog/css/table-border-fluctuation/
上記の記事によると、拡大率を 100% に戻せば <table> 要素の罫線の太さが正しく表示されるとのことでした。
記事内にも、「あくまでブラウザ側の問題であるため、ソース側を修正する必要はありません。」との記載がありました。
ブラウザを確認したら拡大率が 110% になっていたので、こちらを 100% に戻したところ、<table> 要素の罫線の太さがバラつくことなく、正しく表示されました！
私はブラウザの拡大率を変更することがないので、今まで遭遇したことがなかったのですね…。
なお、こちらのバグは <table> 要素に border-collapse: separate; を追加すれば回避できるとのことでした。
サンプルコードは下記のとおりです。
<table> <tr><th>1行目</th><td>要素1A</td><td>要素1B</td></tr> <tr><th>2行目</th><td>要素2A</td><td>要素2B</td></tr> </table>
table {
border-collapse: separate;
border-spacing: 0;
}
tr td, tr th {
border: 1px solid gray;
border-bottom: 0; border-right: 0;
}
tr:last-child th, tr:last-child td {
border-bottom: 1px solid gray;
}
tr td:last-child {
border-right: 1px solid gray;
}
実際に拡大率を変更してみましたが、現時点では罫線の太さにバラつきは見られませんでした。
どうしてもこの不具合を回避なければいけない！というときは、ご参考にしてください。
以上、HTML の <table> 要素で一部の罫線が太くなる問題の対処方法についてでした。
ご参考になれば幸いです。
