javascript - Bootstrap table not working correctly on Chrome but works fine on Firefox -
i've made table that's inside modal using twitter bootstrap 3. weird thing works fine on firefox , jsfiddle 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 jsfiddle:
http://jsfiddle.net/dsf496jw/3/
here screen shots.
chrome:
firefox:
add class <table>
.my-table { table-layout: fixed; word-wrap: break-word; }
it works in md
, lg
screens though it's not perfect mobile.
Comments
Post a Comment