缩放表格宽度以适合列，而无需调整列大小以适合表格

Question

我有一个放置在 div 包装器内的表格，它有 4 列，宽度如下：400 像素、300 像素、300 像素、300 像素（总宽度为 1300 像素）。我正在寻找的行为是表格水平缩放，从而触发其父包装器的溢出：

.table-wrapper {
    width: 800px;
    overflow-x: auto;
}

table {
    min-width: 100%;
    width: auto;
    border-spacing: 0px;
    table-layout: fixed;
    border-collapse: separate;
}

表格的 HTML 是：

<div class="table-wrapper">
    <table>
        <tr>
            <td width="400px">Col 1</td>
            <td width="300px">Col 2</td>
            <td width="300px">Col 3</td>
            <td width="300px">Col 4</td>
        </tr>
    </table>
</div>

它当前的行为是重新调整列，使它们都适合包装器的 800 像素宽度。我在网上搜索过类似的东西，但无济于事（到目前为止）。有人有什么想法吗？

Answer 1

只需将表格的宽度设置为 1300 像素。

http://jsfiddle.net/4Eere/

.table-wrapper {
    width: 800px;
    overflow-x: auto;
    background: blue;
}

table {
    width: 1300px;
    border-spacing: 0px;
    table-layout: fixed;
    border-collapse: separate;
}

td { background: red;}