HTML表中的文本框:如何自动调整大小?

尝试 <input type="text" style="width:100%"/> 获取父td的宽度。

我认为[width 100%]可能是这种方法的一个问题,因为文本框的边框和填充会占用一些添加到宽度中的内容。

的确。

你可以通过增加 padding-right 到包含与输入边框和填充大小相似的输入(或仅对所有单元格)的单元格。然后输入扩展出单元格内容区域,但只扩展到填充区域,这样就不会造成混乱。

对于普通的文本输入就可以了。如果您还有其他元素,如选择框或按钮,您希望以这种方式调整大小,填充方法可能会适得其反,因为在IE中,选择的“宽度”包括边框和填充(由于是一个OS小部件)。

对于大多数浏览器,最简单和最一致的修复方法是css3 box-sizing 财产:

td.input input {
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

IE6-7还不支持这一点,所以您仍然可以在这些浏览器中获得不完全对齐的字段。如果您愿意,可以专门为这些添加一个填充解决方案。

我没有使用jquery表,但我假设如果设置“width:80%;”并定义“td”的宽度,文本框应该从其父级继承其维度(“td”)。

如果这不起作用,或者你想要一个不同的方法,你可以尝试:

td > input[type="text"] {width: 5em;} /* or whatever */

  table td {white-space: nowrap;}
  table th {white-space: nowrap;}

  td input[type="text"] {width: 100%;}

使用 !important 覆盖其他CSS规则