html - 可滚动 div 内的表 -> 如果列太大，div 不会溢出

Question

我在 div 中有一张表，带有 overflow: auto。 如果我将列宽设置为高，浏览器会缩小它们并且 div 不会溢出。

在我的元素中，我必须使用 jQuery().width() 设置宽度，但如果没有任何 js，它也无法工作。

表格是否只溢出我的内容太大？ 我怎样才能使列为 250px 以便 div 溢出？

HTML:

<div class="container">
    <div class="row">
        <div class="col-xs-8 col-xs-offset-2">

            <div id="tableWrapper">
                <table class="table table-bordered">
                    <tbody>
                        <tr>
                            <td style="width: 250px">100.00</td>
                            <td style="width: 250px">100.00</td>
                            <td style="width: 250px">100.00</td>
                            <td style="width: 250px">100.00</td>
                        </tr>
                    </tbody>
                </table>
            </div>

        </div>
    </div>
</div>

CSS:

#tableWrapper {
    width: 100%;
    overflow: auto;
}

这是一个例子:jsfiddle

Answer 1

如果你想要固定宽度的列(250 像素)，你可以使用 table-layout: fixed; 属性:

table {
    table-layout: fixed;
}

td {
    width: 250px;
}

DEMO