tableタグでの表の作成

実現したいこと

以下のような表を作る方法を知りたい。HTML,CSS,Vue.js(Vuetify)を使用している。

発生している問題・エラーメッセージ

横スクロールが、縦スクロールの最下部までいかないと表示されない。

前提

デフォルトで縦スクロール・横スクロールが見えるようにしたい。
scrollableの情報を横スクロールで確認ができる。
fixed,scrollableの情報を縦スクロールで確認ができる。

該当のソースコード

Vue.js

1<div class="wrap"> 2 <div class="fixed"> 3 <table> 4 <thead> 5 <tr> 6 <th>a</th> 7 <th>b</th> 8 <th>c</th> 9 <th>d</th> 10 <th>e</th> 11 <th>f</th> 12 </tr> 13 <tr> 14 <td> 15 2行目 16 </td> 17 </tr> 18 </thead> 19 <tbody> 20 <!-- フィックスされた部分 --> 21 <tr> 22 <td><v-icon height="12" width="12">mdi mdi-circle</v-icon></td> 23 <td><v-icon height="12" width="12">mdi mdi-circle</v-icon></td> 24 <td class="header-td"></td> 25 <td class="header-td"></td> 26 <td class="header-td"></td> 27 </tr> 28 <tr> 29 <td><v-icon height="12" width="12">mdi mdi-circle</v-icon></td> 30 <td><v-icon height="12" width="12">mdi mdi-circle</v-icon></td> 31 <td class="header-td"></td> 32 <td class="header-td"></td> 33 <td class="header-td"></td> 34 </tr> 35 <tr> 36 <td><v-icon height="12" width="12">mdi mdi-circle</v-icon></td> 37 <td><v-icon height="12" width="12">mdi mdi-circle</v-icon></td> 38 <td class="header-td"></td> 39 <td class="header-td"></td> 40 <td class="header-td"></td> 41 </tr> 42 </tbody> 43 </table> 44 </div> 45 <div class="scrollable"> 46 <table> 47 <thead> 48 <tr> 49 <th>g</th> 50 <th>h</th> 51 <th>i</th> 52 <th>j</th> 53 <th>k</th> 54 </tr> 55 <tr> 56 <td>テキスト</td> 57 <td>テキスト</td> 58 <td>テキスト</td> 59 <td>テキスト</td> 60 <td>テキスト</td> 61 </tr> 62 </thead> 63 <tbody> 64 <!-- スクロール可能な部分 --> 65 <tr> 66 <td class="data-td">テキスト</td> 67 <td v-for="j in 10" :key="j">10</td> 68 </tr> 69 <tr> 70 <td class="data-td">テキスト</td> 71 <td v-for="j in 10" :key="j">10</td> 72 </tr> 73 <tr> 74 <td class="data-td">テキスト</td> 75 <td v-for="j in 10" :key="j">10</td> 76 </tr> 77 <tr> 78 <td class="data-td">テキスト</td> 79 <td v-for="j in 10" :key="j">10</td> 80 </tr> 81 </tbody> 82 </table> 83 </div>

CSS

1<style>2.wrap {3 display: flex;4 max-width: 1750px;5 position: relative;6 height: 357px;7 overflow-y: scroll;8 margin: 0 auto;9}10 11.fixed {12 width: calc(58% - 16px); /* 固定部分の幅 */13 overflow: hidden;14 height: 370px;15}16 17.scrollable {18 width: calc(42% - 16px); /* スクロール可能な部分の幅 */19 overflow-x: scroll;20 /* height: 350px; */21 overflow-y: hidden;22}23 24.fixed table,25.scrollable table {26 border-collapse: collapse;27 width: 100%;28}29 30.fixed th,31.fixed td,32.scrollable th,33.scrollable td {34 border: 1px solid #dedede;35 font-size: 11px;36 height: 28px;37 background-color: #fff;38 text-align: center;39}40 41.fixed th,42.scrollable th {43 background-color: #223a70;44 font-size: 10px;45 font-weight: 600;46 color: #fff;47 border-bottom: 1px solid #aaaaaa !important;48 height: 32px;49}50</style>