输入不遵守最大宽度

Question

我知道我的问题与this one有关，但我的情况略有不同，另一个问题也没有解决方案。

所以，我有以下标记：

<table>
    <tr>
        <td>
            <div>I respect max-width</div>
        </td>
        <td>
            <input value="I do not" />
        </td>
    </tr>
</table>

具有以下样式：

table {
    width: 200px;
    background: #f7f7f7;
}
td {
    width: 50%;
    background: #e7e7e7;
}
div, input {
    display: block;
    width: auto;
    max-width: 100%;
    background: red;
}

这是预期的结果：

但是，这是真实的：

不知何故 auto 浏览器确定的输入字段宽度大于 50% (100px)。这一切都很好，但为什么不尊重 max-width: 100%?

如果我强制设置 width: 100% 它会按预期工作（第二张图片），但这不是我想要的。我希望它的宽度与浏览器认为的一样宽，只是不超过 100%。

有什么想法吗？

这是the fiddle。

Answer 1

这可以帮助你：Fiddle

td {
    box-sizing: border-box;
    display: inline-block;
    width: 50%;
    background: #e7e7e7;
}

Answer 2

如果将 table 设置为 table-layout: fixed，您会得到想要的结果：

table {
    width: 200px;
    background: #f7f7f7;
    table-layout: fixed;
}

input {
    display: block;
    max-width: 100%;
    background: red;
    box-sizing: border-box;
}

输入不遵守最大宽度

Input does not respect max-width

html

css

html-table

input

width