I've made a table that's inside a modal using Twitter Bootstrap 3. The weird thing is that it works fine on Firefox and jsFiddle but not on Google Chrome.
<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>.php?cPath=49_9&products_id=7371</td>
<td>2790.00</td>
</tr>
<tr>
<td>2</td>
<td>Gigahertz</td>
<td>;/td>
<td>8695.00</td>
</tr>
<tr>
<td>3</td>
<td>SM Cyber Zone</td>
<td>;/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>
Here is the jsFiddle:
/
Here are some screen shots.
Chrome:
Firefox:
I've made a table that's inside a modal using Twitter Bootstrap 3. The weird thing is that it works fine on Firefox and jsFiddle but not on Google Chrome.
<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>
Here is the jsFiddle:
http://jsfiddle.net/dsf496jw/3/
Here are some screen shots.
Chrome:
Firefox:
Share Improve this question edited Aug 18, 2014 at 1:29 Pang 10.1k146 gold badges86 silver badges124 bronze badges asked Aug 18, 2014 at 1:17 Christian BurgosChristian Burgos 1,5919 gold badges28 silver badges50 bronze badges4 Answers
Reset to default 12Add this class to your <table>
.my-table {
table-layout: fixed;
word-wrap: break-word;
}
Updated jsfiddle
It works in md and lg screens though it's not perfect for mobile.
I believe that Chrome is not a fan of scrolling tables, and bootstrap likes to render the table to fit all the data regardless. In Firefox it scrolls, in chrome it doesn't.
One solution is to wrap the table in a scrollable div. Maybe trigger on a smaller screen small screensize to fix Christain's answer?
DEMO: http://jsfiddle.net/9349fe34/
It would be more user friendly, IMO, to make the width auto. It sizes down nicely and the responsive table will kick in at the 767px break point (default).
Add class .table-modal to the modal
<div class="modal fade table-modal" id="competitor_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
Add 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 */
And remove the .row and col-*-12 and the .container-fluid inside the modal-body, it's not necessary. The padding on the modal-body will work great.
I thought I was experiencing this problem with Bootstrap 4 in Chrome (v. 79.0.3945.79 on Ubuntu 18.04).
The slide bar does not appear, or -more exactly- it just shows briefly as I resize down and then vanishes. However, the bar remains visible/drag-able on firefox as I expected.
The "solution" is just that Chrome does not show the scroll bar, and the scrollbar functionality is rendered in as the table itself. In other words, you use your finger/mouse to drag the table itself left/right just as you would the scrollbar.
I'm 5 years late to this party, but hopefully this message will save someone some time in 2020 and beyond.