如何使用 Bootstrap 在移动设备上显示表格?

问题描述

我的表格在桌面上显示良好，但是一旦我尝试查看移动版本，我的表格最终对于移动设备屏幕来说太宽了.我使用的是响应式布局.

如何为移动视图设置表格宽度?还有哪些其他替代方法可以使用 Bootstrap 在移动视图上显示表格数据?

解决方案

Bootstrap 3 引入了响应表:

<table class="table">...

Bootstrap 4 类似，但通过一些新类:

...响应所有视口...使用 .table-responsive.或者，通过使用 .table-responsive{-sm|-md|-lg|-xl} 选择一个最大断点，以便响应表格.

感谢 Jason Bradley 提供的示例:

My tables display fine on desktop, but once I try to view the mobile version my table ends up being too wide for the mobile device screen. I am using a responsive layout.

How can I set table widths for mobile view?What other alternatives are there to present tabular data on mobile views using Bootstrap?

解决方案

Bootstrap 3 introduces responsive tables:

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Bootstrap 4 is similar, but with more control via some new classes:

Credit to Jason Bradley for providing an example:

这篇关于如何使用 Bootstrap 在移动设备上显示表格?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！