Tableのカラム幅を可変にした上で、一番右のカラム幅だけ「残り全て」としたい

Question

実現したいこと

この画像のようなテーブルを作成したいです。

• テーブルの横幅は親要素の横幅と同じ（width: 100%）
• 左の3つのカラムは中身に合わせて可変
• 一番右のカラムはテーブルの幅の残り全て

前提

一応Nuxt.jsを利用していますが、素のHTML,CSSでも実現できないので、直接関係はない認識です。

試したこと

左の3つのカラムにmax-widthを指定すれば実現できると思ったのですが、
tableにwidthを指定していると、td要素のmax-widthが効かなくなるようです。
tableにwidthではなくmax-witdhを指定すれば効きますが、tableが親要素と同じ幅にならないので断念しました。

また、table-layout: fixedにした上で、左の3つのカラムにwidthを指定すると、
ある程度は実現したいことが達成できるのですが、画面幅を小さくした時に綺麗にカラム幅が小さくならないです。
ある程度までは小さくなるのですが、それ以上小さくすると、要素が重なり、width指定していないときより汚くなるので、これも断念しました。

Answer 1

左3列のセルに、

  width: 0;
  white-space: nowrap;

を付けるのはいかがでしょうか。

Comments

[waito]

わっ！できました！
ありがとうございます！！！！！