The boot table does not work correctly in Chrome, but works fine in Firefox

Question

I made the table inside modal using Twitter Bootstrap 3. It is strange 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">&times;</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&amp;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 jsFiddle:
http://jsfiddle.net/dsf496jw/3/

Here are some screenshots.

Chrome:

Firefox:

Answer 1

Add this class to <table>

 .my-table { table-layout: fixed; word-wrap: break-word; } 

Updated jsfiddle

It works on md and lg screens, although it is not ideal for mobile devices.

Answer 2

I believe that Chrome is not a fan of scrollable tables, and bootstrap likes to display a table to fit all the data independently. In Firefox it scrolls, in chrome it is not.

One solution is to wrap the table in a scrollable div. Maybe a trigger on a smaller screen of screens to fix Christain's answer?

Answer 3

DEMO: http://jsfiddle.net/9349fe34/

It would be more convenient, IMO, to make the width of the car. It significantly reduces the size, and the sensitive table will fire at the break point of 767px (by default).

Add .table-modal class to 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 .row and col - * - 12 and the fluid container inside the modal body, this is not necessary. An overlay on a modal body will work just fine.