Laravel, Bootstrapを使用してwebサイトの画面を作成しています。
table内のborder(罫線)の太さが画面サイズを変更するとバラバラになってしまうブラウザ側のバグがあるようです。ブラウザの問題なのですが、この現象が起きないよう対応してほしいという要望があり苦戦しております。
100%以外の拡大/縮小で不規則に発生します。 Google Chrome, Microsoft Edge, safari全てで起きています。
以下のサイトを参考に、CSSで border-collapse: separate;
とborder-spacing: 0;
を指定しました。
table内のborder(罫線)の太さがバラバラになるバグ|Chrome
.table-information {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;
}
Chromeで確認すると、画像の様な二重線になってしまいます。
実現したいことは以下になります。
- どの拡大率であっても罫線の太さが変化しない
- 二重線ではなく、1本のシンプルな線にしたい
解決方法をご存知の方がいらっしゃればご教示願いたいです。
よろしくお願いいたします。