

Laravel, Bootstrapを使用してwebサイトの画面を作成しています。

table内のborder(罫線)の太さが画面サイズを変更するとバラバラになってしまうブラウザ側のバグがあるようです。ブラウザの問題なのですが、この現象が起きないよう対応してほしいという要望があり苦戦しております。

100%以外の拡大/縮小で不規則に発生します。 Google Chrome, Microsoft Edge, safari全てで起きています。

以下のサイトを参考に、CSSで `border-collapse: separate;`と`border-spacing: 0;`を指定しました。

[table内のborder（罫線）の太さがバラバラになるバグ｜Chrome](https://marycore.jp/prog/css/table-
border-fluctuation/)

[code]

    .table-information {
    　　　　display: block;
    　　　　overflow-x: auto;
    　　　　-webkit-overflow-scrolling: touch;
    　　　　white-space: nowrap;
    　　　　border-collapse: separate;
    　　　　border-spacing: 0;
    　　　　table-layout: fixed;
    }
    
[/code]

Chromeで確認すると、画像の様な二重線になってしまいます。

[![画像の説明をここに入力](https://i.stack.imgur.com/MWicY.png)](https://i.stack.imgur.com/MWicY.png)

実現したいことは以下になります。

  * どの拡大率であっても罫線の太さが変化しない
  * 二重線ではなく、1本のシンプルな線にしたい

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


CC BY-SA 4.0
2022-12-08T04:10:13.983
92633
2022-12-08T07:34:12.023
2022-12-08T07:34:12.023
3060
55847
question
html css google-chrome safari microsoft-edge
table内のborderの太さがバラバラになるバグ


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

[code]

    <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>
    
[/code]

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


CC BY-SA 4.0
2022-12-08T04:16:10.310
92634
2022-12-08T04:16:10.310
15380
92633
answer