CSSでオーバーフローが発生したレスポンステーブルの問題

Question

モバイル経由で応答可能なソリューションが最後に必要なソリューションが見つかりました。解決策は、テーブルの周りにdivを配置し、オーバーフロースクロールを使用することでした。しかし、divクラス "tablewrapper"を持たないテンプレートの読み込みを更新する必要があるので、オーバーフロースクロールをテーブルまたはtbodyのすぐ上に設定する方法はありますか？

HTMLテーブルコード

<h3 class="showOnMobile">Swipe right or rotate your device to see full table</h3> 
<div class="tablewrapper"> 
<table> 
<tbody> 
</tbody> 
<thead> 
<tr> 
<th scope="col">Code</th> 
<th scope="col">Colour</th> 
<th scope="col">Capacity Litre</th> 
<th scope="col">Height</th> 
<th scope="col">Diameter</th> 
<th scope="col">Weight</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td data-label="Code">123</td> 
<td data-label="Colour">Stainless Steel</td> 
<td data-label="Capacity Litre">45Ltr</td> 
<td data-label="Height">0.65m</td> 
<td data-label="Diameter">0.35m</td> 
<td data-label="Weight">3.1kg</td> 
</tr> 
</tbody> 
</table> 
</div> 

tablewrapper

.tablewrapper { 
    max-width:100vw; 
    overflow-y:scroll; 
} 
@media only screen and (min-width: 600px) { 
    h3.showOnMobile { 
     display:none; 
    } 
} 

Answer 1

ためのCSS私は正しいです、あなたは= のdivクラスを置き換えるtablewrapperと直接スタイルを適用したい場合右のテーブルに？ divを削除し、その代わりにスタイルタグitslefに従いました。

table { 
    max-width:100vw; 
    overflow-y:scroll; 
    display: block; 
} 

これは同じです。問題が同じかどうか教えてください。