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

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

只需将表格的宽度设置为 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;}