输入不符合最大宽度

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-layout: fixed，则会获得所需的结果：

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

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