0

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本のシンプルな線にしたい

解決方法をご存知の方がいらっしゃればご教示願いたいです。
よろしくお願いいたします。

1 件の回答 1

0

参考サイトの通り border-spacing: 0 にしてはいかがでしょうか

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

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

https://codepen.io/yumainaura/pen/eYKXJvP

3
  • すみません、border-spacing: 0も適用しております。質問文にも追記いたします。
    – KeiOTN
    Commented 2022年12月8日 4:35
  • 1
    肝心のHTML&CSSのコードも書いておいてはいかがでしょうか Commented 2022年12月8日 5:16
  • ありがとうございます。Bootstrap使用していることとCSSを追記しました。
    – KeiOTN
    Commented 2022年12月8日 7:33

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。