こんな感じのテーブルを作ったのですが自分のCSS周りの知識が乏しいせいかいまいち思う様な形のテーブルになりません。。。
html
1<table> 2 <thead class="header"> 3 <tr> 4 <th>hoge</th> 5 <th>hoge</th> 6 <th>hoge</th> 7 <th>hoge</th> 8 <th>hoge</th> 9 </tr> 10 </thead> 11 <tbody> 12 <tr v-for="(item, index) in list" :key="index"> 13 <td>{{item.hoge }}</td> 14 <td>{{item.hoge }}</td> 15 <td>{{item.hoge }}</td> 16 <td>{{item.hoge}}</td> 17 <td> 18 <img class="hoge" src="../assets/hoge.png"> 19 <img class="huga" src="../assets/hoge.png"> 20 </td> 21 </tr> 22 </tbody> 23</table> 24 25 26
css
1table { 2 border-collapse:collapse; 3 width: 60vw; 4 height: 40vh; 5} 6table tr { 7 border:1px solid #707070; 8} 9 10table td { 11 border:1px solid #707070; 12} 13 14table thead tr th { 15 min-width: 10vw; 16 background: #CECECE; 17 border: 1px solid #707070; 18} 19
使っているのはVueなんでテンプレートの構文が入っていますがその辺はあまり関係ないです。
こんな感じでセルの中身が大きくなっても横に伸びたりして縦が固定で横が可変なテーブルにしたいのですがどのあたりのCSSを修正すれば良いでしょうか?
ご教授いただけると幸いです。
画像で言うとこの様になってしまうので横にはいくら長くなってもいいけれど改行したりして縦が長くなっていかない様にしたいです。
追記ですが、
white-space: nowrapで思う様な形にできたのですが、以下の様にtdにimgタグを付与した場合
html
1 <td> 2 <img :src="item.image_1_data"> 3 <img :src="item.image_2_data"> 4 <img :src="item.image_3_data"> 5 <img :src="item.image_4_data"> 6 </td> 7
下記画像の様に枠をはみ出してしまいます。
4枚画像がありますがこちら一つのセルをはみ出して隣のセルに来てしまっています。
こちら画像の幅にも合わせてセルの幅を広げるにはどうすればよろしいでしょうか??