Jquery 在小屏幕上显示折叠中的DIV，但在桌面上显示正常

当有人在移动设备上打开页面时，我想在折叠中显示Table DIV，但在桌面上，它应该显示为简单的Table而不折叠

<a class="btn btn-primary" data-toggle="collapse" 
  href="#table-collapse" role="button" aria-expanded="false" >
  Hello World
</a>

<table class="table table-borderless" id="table-collapse">
     <tbody>
         <tr>
            <td>Name</td>
            <td>City</td>
            <td>Country</td>
         </tr>
         <tr>
            <td>Name</td>
            <td>City</td>
            <td>Country</td>
         </tr>
    </tbody>
</table>

名称
城市
国
名称
城市
国

您应该使用

媒体查询

。在这里，您可以找到一些有关其工作原理的示例：

@仅媒体屏幕和（最大宽度：800px）{
.小屏幕{
颜色：绿色；
}
.大屏幕{
显示：无；
}
} 
@仅介质屏幕和（最小宽度：800px）{
.小屏幕{
显示：无；
}
.大屏幕{
颜色：蓝色；
}
}

名称
城市
国
名称
城市
国
名称
城市
国
名称
城市
国

您可以通过属性来实现这一点

我使用jQuery和引导版本4尝试了您想要的东西

下面是片段。试试这个可能会对你有帮助。

$（“#showTable”）。单击（函数（）{
$（“#collapsedTable”）.toggleClass（'d-none d-sm-block'）；
});

你好，世界
名称
城市
国
名称
城市
国
使用
@media
查询，查看MDN。无法找到解决方案：（@ikt您检查过这个吗？