html - 表格未调整大小以输入

Question

为什么表格单元格不会调整为较小的输入字段？

我有以下 html:

<table>
    <tbody>
        <td>
            <input></input>
        </td>
    </tbody>
</table>

我有以下 CSS:

input {
    width: 50%;
    max-width: 50%;
}

td {
    border: 2px;
    border-color: black;
    border-style: solid;
}

然而，在 css 中设置宽度后，边框显示父元素(在本例中为 td 元素)采用 input 元素的原始大小。这是一个jsfiddle这证明了。

Answer 1

我看到了 fiddle ，这就是我找到的。

input {
    width: 50%;
    max-width: 50%;
}

这使得 input 比 td 宽 50%，因为 td 是 input 的父元素.

从输入中删除 50% 宽度和最大宽度，并尝试在表格元素上应用宽度

这是格式化的 html。

<table>
    <tbody>
        <tr>
          <td>
           <input>
          </td>
       </tr> 
    </tbody>
</table>