表没有调整大小以输入

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 元素）采用输入元素的原始大小。这是展示的jsfiddle。

Answer 1

我看到小提琴，这就是我找到的。

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

与input相比，td宽50％，因为td是input的父元素。

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

这是格式化的html。

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

Answer 2

如果设置输入的宽度，如果将其添加到html中，表格将调整大小：

td{display: inline;}