vueで動的に表示するtableの幅を固定したい。

Question

Laravel環境のvue.jsにてtableを描画しているのですが、動的に横列が増えた場合にテーブルの幅が変更されてレイアウトが崩れます。
th,tdセル幅を固定したいのですが、CSSについてご教授お願いします。

html,body{
  min-width:1300px;
  height:600px;
}
table{
  border:none;
  border-collapse:collapse;
  table-layout:fixed;
  min-width:1280px;
}
thead, tbody {
  display: block;
  min-width:1280px;
}
tbody{
  overflow-x: visible;
  overflow-y: scroll;
  height: 70vh;
  -ms-overflow-style: none;
  scrollbar-width: none;   
}
th{
  width:20px;
}
td{
  width:20px;
}

Answer 1

全体の幅を限定して、overflowで表示できない箇所をスクロールで表示させることで解決しました。

Answer 2

max-widthじゃだめですか？

Answer 3

https://qiita.com/ymeeto/items/f165576f49f37e28e253を参考に、tableタグにdispaly: blockを追加すれば動作します。念のため、自分が検証したコードも共有いたします。

table
  tr
    th タイトル1
    th タイトル2
    th タイトル2
  tr
    td コンテンツ1
    td コンテンツ2

table
  display block
  overflow-x scroll
  white-space nowrap
  width 300px
table tbody
  width: 100%
  display:table
th
  display inline-block
  width 150px
  height 50px
  border 1px solid #00f
td
  display inline-block
  width 150px
  height 50px
  border 1px solid #f00

Comments

[退会済みユーザー]

ありがとうございます。
試してみましたが、列数が多くなるとセル幅が崩れてしまいました。