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

【问题标题】：textboxes in HTML table: How to auto-size?HTML 表格中的文本框：如何自动调整大小？
【发布时间】：2011-01-12 12:43:33
【问题描述】：

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

FWIW，表格是基于jQuery DataTables插件的。

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

【问题讨论】：

【解决方案1】：

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

【讨论】：

我不完全确定，但我认为这种方法可能存在问题，因为文本框的边框和填充占用了一些添加到宽度的内容。也就是说，如果 td 是 100px 宽并且文本框有 1px 边框和 4px 内边距，那么如果设置为 width="，则文本框实际需要的总宽度为 100 + 2 * (1 + 4) = 110px 100%”。我想。
哈！就如此容易！在 IE8 中可以正常工作，但在 Chrome 中不行：宽度百分比与 col 宽度匹配，但列宽了。
你可以试试 width:auto 或 width:inherit
auto/inherit 宽度不行，你需要100%。如果您发现额外的大小影响了列宽，则意味着您必须使用默认的auto 表格布局。您通常不需要自动表格布局，因为它渲染速度慢且不可预测。最好是设置table-layout: fixed 并为要固定的列提供明确的宽度（在第一行单元格上，或者更好的是<col>）。没有明确宽度的列在它们之间共享剩余宽度。
当我摆脱了一些列宽规范时，一切都很好。我想我永远不会知道为什么！

【解决方案2】：

我认为 [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 尚不支持此功能，因此您仍然可以获得在这些浏览器中不完全一致的字段。如果您愿意，可以专门为这些添加填充解决方法。

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

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

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

使用!important 覆盖其他css规则

【讨论】：