同僚に「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;
を追加すれば回避できるとのことでした。
サンプルコードは下記のとおりです。
1 2 3 4 | < table > < tr >< th >1行目</ th >< td >要素1A</ td >< td >要素1B</ td ></ tr > < tr >< th >2行目</ th >< td >要素2A</ td >< td >要素2B</ td ></ tr > </ table > |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 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> 要素で一部の罫線が太くなる問題の対処方法についてでした。
ご参考になれば幸いです。