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

Question

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

FWIW,该表基于jQuery DataTables插件.

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

Answer 1

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

Answer 2

我认为[宽度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尚不支持此功能,因此您仍然可以获得在这些浏览器中排列不完整的字段.如果您在意,可以专门为这些添加填充解决方法.