Bootstrap表格在Chrome上无法正常工作，但在Firefox上可以正常工作。

Question

我用 Twitter Bootstrap 3 制作了一个在 modal 中嵌入的表格。奇怪的是，在 Firefox 和 jsFiddle 上可以正常运行，但在 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>

这里是jsFiddle：
http://jsfiddle.net/dsf496jw/3/ 以下为一些屏幕截图。

Chrome: Firefox:

- Christian Burgos

Answer 1

將這個類加到您的<table>中。

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

更新的 jsfiddle

虽然它在 md 和 lg 屏幕上可以工作，但对于移动设备来说并不完美。

- Dan

---

当然，您也可以像 <td style="width:20%"> 这样向 <td> 标签添加内联宽度来调整列宽（四列之间的总宽度应为 100％）。 - Dan

Answer 2

演示：http://jsfiddle.net/9349fe34/

在我看来，如果将宽度设置为自动，则更加用户友好。它可以很好地调整大小，并且响应式表格将在767像素断点（默认）处启用。

将类.table-modal添加到模态框中。

<div class="modal fade table-modal" id="competitor_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

添加 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 */

移除模态框中的.row和col-*-12以及.container-fluid，这些都是不必要的。modal-body上的内边距会起到很好的作用。

- Christina

Answer 3

我认为Chrome不喜欢滚动表格，Bootstrap则喜欢渲染表格以适应所有数据。在Firefox中它可以滚动，在Chrome中不能。

一种解决方案是将表格放在可滚动的div中。也许在较小的屏幕上触发小屏幕大小来修复Christain的答案？

- Theodore Enderby

Answer 4

我以为我在Chrome（v. 79.0.3945.79 on Ubuntu 18.04）中使用Bootstrap 4时遇到了这个问题。

滑动条不会出现，或者更准确地说，当我缩小大小时它只会短暂地显示，然后消失。但是，在Firefox上，滚动条仍然可见/可拖动，就像我预期的那样。

“解决方案”就是Chrome不显示滚动条，而滚动条功能被呈现为表格本身。换句话说，您可以使用手指/鼠标拖动表格本身左/右，就像您拖动滚动条一样。

虽然我迟到了5年，但希望这条消息能够在2020年及以后节省某些人的时间。

- C-Note187