内有响应表的引导面板
内有响应表的引导面板
提问于 2014-04-09 11:12:34
以下是JS链接：http://jsbin.com/qiziyupo/4/edit?output
响应表不会收缩以适应面板。我怎么才能解决这个问题？
编辑:我正在寻找一个解决方案，响应表将调整大小，以适应在面板内，而不必使面板更大。
回答 5
Stack Overflow用户
回答已采纳
发布于 2014-04-09 14:15:21
.table-responsive类仅用于在移动设备上响应.
从自带3.1.1文件..。
通过将任何.table包装在.table中创建响应表，使它们水平滚动到小型设备(低于768 up )。当查看大于768 in宽的任何内容时，您将不会在这些表中看到任何差异。
但是您可以在不需要媒体查询的情况下将类添加到css中，并在任何视口获取该功能。
但请注意，这不会缩小表，它只提供一个水平滚动条.
下面是Bootstrap中的.table-responsive类，而媒体查询将其限制在768 is及以下。
.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;
}还有一些关于.table-bordered的CSS规则，我没有包括.
Stack Overflow用户
发布于 2015-10-07 05:19:04
<div class="panel-body" style="overflow:scroll">
<table class="table table-bordered">只需在面板体中为表格水平滚动编写此文件即可。
Stack Overflow用户
发布于 2014-11-25 01:14:40
最好不要使用面板体，把表放在面板标签中，不要使用面板体。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22971906
复制
相似问题
引导面板-阀体内有表
引导.表响应不工作在面板中
内有表的响应下拉菜单
引导:响应面板和图像
引导:面板中的响应图像
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
社区富文本编辑器全新改版！诚邀体验～
全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验
腾讯云开发者
