HTML表格中的文本框：如何自动调整大小？

Question

我想在HTML表格底部（或顶部，无论如何）添加一行，每列都有一个文本框（以允许过滤每列的内容）。

FWIW，该表基于jQuery DataTables插件。

问题是文本框扩大了列。我希望每个文本框都填充其列的宽度而不放大它。我怎么能这样做？

Answer 1

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

Answer 2

  

我认为[宽度100％]可能是这种方法的一个问题，因为文本框的边框和填充占用了一些，并添加到宽度。

确实

您可以通过将padding-right添加到包含与输入的border-and-padding类似大小的输入（或仅对所有单元格）的单元格来补偿这一点。输入然后扩展出单元格内容区域，但只扩展到填充，因此它不会弄得一团糟。

对于普通的文本输入，这没关系。如果您还有其他元素，如选择框或按钮，您希望以这种方式调整大小，填充方法可能适得其反，因为在IE上，选择的“宽度”包括边框和填充（由于是一个操作系统小部件） ）。

对于大多数浏览器，解决此问题的最简单且最一致的方法是CSS3 box-sizing属性：

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

IE6-7尚未支持此功能，因此您仍然可以获得在这些浏览器中排列不完整的字段。如果您在意，可以专门为这些添加填充解决方法。

Answer 3

我没有使用过jQuery Tables，但我认为如果设置'width：80％;'并定义'td'的宽度，文本框应从其父级（'td'）继承其尺寸。

如果这不起作用，或者你想要一种不同的方法，你可以尝试：

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

Answer 4

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

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

使用!important覆盖其他CSS规则