表格未调整大小以输入答案

【问题标题】：table not resizing to input表格未调整大小以输入
【发布时间】：2013-12-21 04:09:25
【问题描述】：

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

我有以下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;
}

但是边框显示父元素（在本例中为 td 元素）在 CSS 中设置宽度后采用 input 元素的原始大小。这是一个jsfiddle 的演示。

【问题讨论】：

所以...您希望宽度为 50% 的项目是...父容器的 100% 宽度？如果 TD 调整大小，输入将不再具有 50% 的宽度。看起来按预期工作。
等等什么？因为你有 50% 的宽度，所以它采用默认值和一半。所以td 必须为输入留出 50% 的空间。就这么简单。
@MikeSmithDev 我想我误解了使用百分比设置宽度的工作原理，但我希望输入为正常情况下的 50%。
@RyanGates 确实。没有任何父宽度。最接近的父宽度将是主体本身。但它也不占用身体的宽度。这很奇怪，但很有趣^^
@RyanGates 不，td 没有默认宽度，但input 有默认宽度（默认大小为 20）...这种情况很有趣...看起来默认输入大小的 TD 宽度为 100%，as shown in this fiddle... 这不适用于 div。

【解决方案1】：

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

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

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

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

这是格式化的 html。

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

【讨论】：

那么使用百分比作为宽度会阻止父级根据其内容调整大小？
@RyanGates 他的意思是，如果您在 td 内提供输入的 50% 的宽度，那么它将是容器的一半意味着 td 的一半 100 % 2 = 50%

【解决方案2】：

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

td{display: inline;}

【讨论】：