我使用Twitter Bootstrap 3创建了一个使用模式的表.奇怪的是它在Firefox和jsFiddle上工作正常,但在谷歌浏览器上却没有.
http://jsfiddle.net/dsf496jw/3/ @H_404_4@这是一些屏幕截图. @H_404_4@铬： @H_404_4@火狐：
<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>
@H_404_4@这是jsFiddle：http://jsfiddle.net/dsf496jw/3/ @H_404_4@这是一些屏幕截图. @H_404_4@铬： @H_404_4@火狐：
解决方法
将此类添加到< table>
.my-table {
table-layout: fixed;
word-wrap: break-word;
}
@H_404_4@Updated jsfiddle
@H_404_4@它适用于md和lg屏幕,虽然它不适合移动设备.
