html - Bootstrap : How to make table shrink to screen?

Question

当我缩小浏览器屏幕以模拟移动显示时，表格会像我希望的那样运行:它会缩小以适合。在这里查看:

但是，当我在 Safari 上进入响应式设计模式时(或者当我在移动设备上访问网站时)，表格会中断。在这里查看:

正如您在第二张照片中看到的，我有一个 <div class="table-responsive">缠绕在我的 table 上。这使得表格可以在移动显示器上滚动。我不想要卷轴，我想要它显示所有内容，只是缩小了一点。

我的数据单元格的宽度设置为百分比(例如 5%、10%、30%)，因此表格不会被迫溢出。

如有任何帮助，我们将不胜感激。

Answer 1

尝试对设备使用媒体查询以仅更改该设备的 CSS。像...

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
// insert CSS here to make adjustments for this view

}