html - 列宽超过容器宽度的表格

Question

当我将表格放在固定宽度的容器中并且列的宽度总和超过容器宽度时，作为一般规则，我观察到表格不会溢出容器，但列将被渲染比它们的样式宽度窄。

但我也观察到一些表格确实溢出的情况。此处(或此 Fiddle 中)显示了一个让我特别困惑的案例:

    <div style="width:750px;border:1px solid black">
    <table>
        <tr>
            <td>
                <table>
                    <tr>
                        <td colspan="2">
                            <input style="width: 210px;">
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 200px"></td>
                        <td><input style="width: 200px;"></td>
                    </tr>
                </table>
            </td>
            <td>
                <input style="width:400px">
            </td>
        </tr>
    </table>
</div>

在 Chrome (40.0) 中，列宽被保留并且表格溢出。在 IE 和 FF 中，表格适合容器，列被缩短。是否有将表“压缩”到容器中的一般规则？ Chrome 有问题吗？还是这种复杂的表格设计无可救药地超出了规范？

Answer 1

您可以将输入的那些宽度设置为 max-width:100% 和 width:100%看看这个https://jsfiddle.net/ky2okqy5/6/

已更新 https://jsfiddle.net/ky2okqy5/7/