Bootstrap table not working correctly on Chrome but works fine on Firefox

Question

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">&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 the jsFiddle:
http://jsfiddle.net/dsf496jw/3/

Here are some screen shots.

Chrome:

Firefox:

Answer 1

Add 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.

Answer 2

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?