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的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 { 
    max-width:100vw;
    overflow-y:scroll;
    display: block;
}

它的工作方式相同。如果您的问题相同或不同，请告诉我。

CSS上出现溢出的响应表问题

1 个答案: