CSS – tableのborder線が一部太くなるのを防ぐ
ブラウザ側の問題でChromeなどでtableのborderの線が一部太くなる現象が発生しているようです。ページの拡大率によって線が太くなったり増えたりして困ったやつです。
ですがborderの線のサイズを1px以下にサイズ変更してみたところ(0.5px
など)にサイズ変更したところ拡大率を変更してもborderの線の太さが統一されるようになりました。下記のコードみたいに設定すれば一部太くなるのを防げると思います。
border:solid gray .5px;
できればborderの線の太さは変えたくない場合は<td>
, <th>
をpaddingで調整することも可能ですが、拡大率によって崩れてしまうので100%想定しているのであればありの解決策かなと思います。こちらもpaddingの数値を小数点で指定してあげます。
tr{
padding:3.5px 0;
}
上のコードはあくまで仮なので数値によって一部が太い状態だと思うので数値を変えて微調整してみてください。デフォルトの拡大率であれば線の太さを調整できると思います。