代码之家 › 专栏 › 技术社区 › Serge Wautier

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

datatables layout css html

8

Serge Wautier · 技术社区 · 15 年前

我想在HTML表的底部(或顶部,随便什么)添加一行,在每列中都有一个文本框(以允许过滤每列的内容)。

fwiw,该表基于jquery datatables插件。

问题是文本框加宽了列。我希望每个文本框填充其列的宽度而不放大它。我该怎么做?

4 回复 | 直到 15 年前

1

19

ntan 15 年前

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

2

10

bobince 15 年前

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

3

2

David Thomas 15 年前

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

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

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

4

0

rashidnk 7 年前

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

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

使用 !important 覆盖其他CSS规则