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/

列宽超过容器宽度的表

1 个答案: