twitter-bootstrap - 如何使用 Bootstrap 在移动设备上显示表格？

Question

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

如何设置移动视图的表格宽度？还有哪些其他替代方法可以使用 Bootstrap 在移动视图上呈现表格数据？

Answer 1

Bootstrap 3 引入了响应式表：

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

Bootstrap 4 类似，但通过一些新类进行了更多控制：

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

感谢Jason Bradley提供的示例：

Answer 2

您也可以考虑尝试其中一种方法，因为较大的表格在移动设备上并不完全友好，即使它有效：

http://elvery.net/demo/responsive-tables/

我偏爱“No More Tables”，但这显然取决于您的应用程序。

Answer 3

bootstrap 中的所有表格都根据它们所在的容器进行拉伸。您可以将表格放在一个.span元素中以控制大小。这个 SO Question 可以帮助你

为什么 Twitter Bootstrap 表格总是有 100% 的宽度？

Answer 4

经过近 1 个月的研究，我发现下面的代码在我的网站上运行得非常漂亮且 100% 完美。要检查预览它是如何工作的，您可以从链接中检查。https://www.jobsedit.in/state-government-jobs/

和

https://www.jobsrob.in/category/central-government-jobs/

CSS 代码-----

@media only screen and (max-width: 500px)  {
    .resp table  { 
        display: block ; 
    }   
    .resp th  { 
        position: absolute;
        top: -9999px;
        left: -9999px;
        display:block ;
    }   
     .resp tr { 
    border: 1px solid #ccc;
    display:block;
    }   
    .resp td  { 
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        width:100%;
        background-color:White;
        text-indent: 50%; 
        text-align:left;
        padding-left: 0px;
        display:block;      
    }
    .resp  td:nth-child(1)  {
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        font-size:20px;
        text-indent: 0%;
        text-align:center;
}   
    .resp td:before  { 
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%; 
        text-indent: 0%;
        text-align:left;
        white-space: nowrap;
        background-color:White;
        font-weight:bold;
    }
    /*
    Label the data
    */
    .resp td:nth-of-type(2):before  { content: attr(data-th) }
    .resp td:nth-of-type(3):before  { content: attr(data-th) }
    .resp td:nth-of-type(4):before  { content: attr(data-th) }
    .resp td:nth-of-type(5):before  { content: attr(data-th) }
    .resp td:nth-of-type(6):before  { content: attr(data-th) }
    .resp td:nth-of-type(7):before  { content: attr(data-th) }
    .resp td:nth-of-type(8):before  { content: attr(data-th) }
    .resp td:nth-of-type(9):before  { content: attr(data-th) }
    .resp td:nth-of-type(10):before  { content: attr(data-th) }
}

HTML 代码——

<table>
<tr>
<td data-th="Heading 1"></td>
<td data-th="Heading 2"></td>
<td data-th="Heading 3"></td>
<td data-th="Heading 4"></td>
<td data-th="Heading 5"></td>
</tr>
</table>