table内のborder(罫線)の太さがバラバラになるバグ|Chrome

Chromeブラウザでtable要素内のborderの太さがバラバラに表示されてしまう問題に遭遇しました。

trタグやtdタグに指定したborderプロパティの太さが一部太くなってしまう現象が発生しています。
Mac版のChromeでは2021年の6月頃からこの状況が続いています。

この問題の原因はブラウザのバグとページの拡大率にあります。

ブラウザ側のスケール(ページのズーム)を標準のサイズに変更すれば、罫線が正常な太さで表示されるようになります。

次の設定をご確認ください。

設定 → デザイン → ページのズーム → 100%

ショートカットキーの場合
・Mac: Command + 0
・Windows: Ctrl + 0

あくまでブラウザ側の問題であるため、ソース側を修正する必要はありません。

近年のChromeはtable側の仕様を大きく変更したため、この問題はその影響によるものだと思われます。Chrome 91ではTableNGというこれまでとは異なる新たなレイアウトシステムが用いられています。

TableNGを無効化する方法

TableNGの有効/無効の状態は以下のURIで確認できます。

chrome://flags/#enable-table-ng

オススメはしませんが、このEnable TableNGの設定をDisabled(無効)の状態にすれば、以前のような正常なボーダーがレンダリングされるようになります(ブラウザが再起動するため注意)。ただし最新のレイアウトシステムは利用できなくなります。

コードで対処する方法

今回の問題はブラウザ側のバグであるため、コード側で対処する必要はまったくありませんが、一応テーブルをborder-collapse: separateで描画することで、今回のバグを回避することもできます。

<style>
  table { border-collapse: separate; border-spacing: 0 }
  tr td { border-top: 1px dashed gray }
  tr:last-child td { border-bottom: 1px dashed gray }
</style>

<table>
  <tr><td>a</td></tr>
  <tr><td>b</td></tr>
</table>
広告