我使用Twitter Bootstrap 3在一个模式中创建了一个表。奇怪的是它在Firefox和jsFiddle上工作正常,但在谷歌浏览器上却没有。
<button class="btn btn-xs btn-default" data-toggle="modal" data-target="#competitor_modal">
Competitor
</button>
<div class="modal fade" id="competitor_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Competitors</h4>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>URL</th>
<th>Final Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Comp Link</td>
<td>http://www.complink.com.ph/product_info.php?cPath=49_9&products_id=7371</td>
<td>2790.00</td>
</tr>
<tr>
<td>2</td>
<td>Gigahertz</td>
<td>http://www.gigahertz.com.ph/products/accessories/headset/a4tech-hs-105</td>
<td>8695.00</td>
</tr>
<tr>
<td>3</td>
<td>SM Cyber Zone</td>
<td>http://www.smcyberzone.com/products/mobile-phones/acer/acer-liquid-s1</td>
<td>9800.00</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
这是jsFiddle:
http://jsfiddle.net/dsf496jw/3/
以下是一些屏幕截图。
铬:
火狐:
答案 0 :(得分:9)
将此课程添加到<table>
.my-table {
table-layout: fixed;
word-wrap: break-word;
}
它可以在md
和lg
屏幕中使用,但它不适合移动设备。
答案 1 :(得分:2)
我认为Chrome不是滚动表的粉丝,而bootstrap喜欢渲染表格 无论如何都适合所有数据。在Firefox中它以滚动方式滚动,它没有。
一种解决方案是将表包装在可滚动的div中。 也许在较小的屏幕上触发小屏幕以修复Christain的答案?
答案 2 :(得分:2)
使宽度自动更友好,IMO。它的大小很好,响应表将在767px断点处启动(默认)。
将班级.table-modal
添加到模态
<div class="modal fade table-modal" id="competitor_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
添加CSS:
.table-modal .modal-dialog {width:auto;max-width:1000px;}
.table-modal {padding-left:5%;padding-right:5%;} /* put this in a 768px min-width */
然后移除.row和col - * - 12以及模态体内的.container-fluid,这是没有必要的。模态体上的填充物效果很好。
答案 3 :(得分:0)
我以为我在Chrome的Bootstrap 4中遇到了这个问题(在Ubuntu 18.04上为79.0.3945.79)。
滑动条没有出现,或者-更确切地说-在我缩小尺寸然后消失时只是短暂显示。但是,如我所料,该条在Firefox上仍然可见/可拖动。
“解决方案” 只是 Chrome 不显示滚动条,并且滚动条功能显示为表格本身。换句话说,就像滚动条一样,您可以用手指/鼠标向左/向右拖动表。
我参加这个聚会已经晚了5年,但希望此消息能在2020年及以后为某人节省一些时间。