html - CSS 溢出的响应表问题

Question

我上次找到了一个解决方案，我需要一个表格来通过移动设备进行响应。解决方案是在 table 周围放置一个 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 的 CSS

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

Answer 1

如果我是对的，你想替换 div class= tablewrapper 并想直接在表格上应用样式对吧？？？ 我删除了 div，而是按照 table 标记 itslef 的样式。

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

效果一样。请让我知道您的问题是否相同。