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

Question

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

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

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

Answer 1

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

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;}