带有响应式表格的Bootstrap面板

Question

带有响应式表格的Bootstrap面板

csstwitter-bootstraptwitter-bootstrap-3

7

这里有一个JS Bin链接：http://jsbin.com/qiziyupo/4/edit?output 响应式表格无法缩小以适应面板。我该如何解决？

编辑：我正在寻找一种解决方案，使响应式表格可以调整大小以适应面板，而不必使面板更大。

- Zack Gao

5个回答

5

<div class="panel-body" style="overflow:scroll">            
  <table class="table table-bordered">

只需在面板区域中编写以下内容即可实现表格水平滚动。

- chetan

我已经更新了你的帖子以包含代码。你可以在这个网站上阅读有关代码格式的信息：http://stackoverflow.com/help/formatting - josliber

2

最好不要使用panel-body，将表格放在面板标签内，不要使用Panel Body。

- Manjush

0

这是因为Panel有这个类：

.col-md-3 {
    width: 25%;
}

这是强制宽度的问题。去掉它，一切都会没问题的 :-)

- Luca Detomi

谢谢Luca，但这不是我想要的。我已经编辑了我的问题，使事情更加清晰。 - Zack Gao

你不能得到你想要的，因为你的内容需要比面板宽度更大的空间。正如你所看到的，你没有可以在表格单元格内换行的“句子”，只有填充特定空间的单个单词。如果你不能扩大你的面板，唯一的解决方案是减少表格单元格的填充和每个文本的字体大小...这样你就能够恢复一些空间了。 - Luca Detomi

0

使用容器也会对其产生影响。如果您的布局没有固定布局，请使用container-fluid，并且.table类的响应性就不会有任何问题。

- Khasan 24-7

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Schmalzy · Accepted Answer

.table-responsive类只设计为在移动设备上响应性。根据Bootstrap 3.1.1文档，通过将任何一个`.table`放在`.table-responsive`中来创建响应式表格，使它们在小于768像素的设备上水平滚动。在宽度大于768像素的任何设备上查看时，这些表格不会有任何区别。

但是你可以将该类添加到您的CSS中，而无需媒体查询，并在任何视口中获得功能。

但请注意，这并不会缩小表格，只会提供水平滚动条...

以下是Bootstrap的.table-responsive类，没有将其限制为768像素及以下的媒体查询。

.table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    overflow-x: scroll;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #ddd;
    -webkit-overflow-scrolling: touch;
}

.table-responsive>.table { 
    margin-bottom: 0;
}

.table-responsive>.table>thead>tr>th, 
.table-responsive>.table>tbody>tr>th, 
.table-responsive>.table>tfoot>tr>th, 
.table-responsive>.table>thead>tr>td, 
.table-responsive>.table>tbody>tr>td, 
.table-responsive>.table>tfoot>tr>td {
    white-space: nowrap;
}

还有几个CSS规则适用于.table-bordered，我没有包括在内...