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

Question

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

FWIW，该表基于 jQuery DataTables 插件。

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

score 19 · Accepted Answer

19

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

于 2010-02-03T08:24:41.403 回答

score 10 · Accepted Answer

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

确实。

padding-right您可以通过添加到包含与输入的边框和填充大小相似的输入（或仅添加到所有单元格）的单元格来弥补这一点。然后输入扩展出单元格内容区域，但仅扩展至填充，因此不会造成混乱。

这对于普通的文本输入是可以的。如果您还有其他元素，例如您希望以这种方式调整大小的选择框或按钮，则填充方法可能会适得其反，因为在 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 尚不支持此功能，因此您仍然可以获得在这些浏览器中不完全一致的字段。如果您关心，您可以专门为这些添加填充解决方法。

score 2 · Accepted Answer

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

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

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

score 0 · Accepted Answer

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

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

用于!important覆盖其他 CSS 规则

4 回答 4