浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【HTML】Google Chromeでtable要素の一部の罫線が太くなる

同僚に「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> 要素で一部の罫線が太くなる問題の対処方法についてでした。
ご参考になれば幸いです。

  • この記事いいね! (0)