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

Posted 2023-05-07

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

【英文标题】：textboxes in HTML table: How to auto-size?

【发布时间】：2011-01-12 12:43:33

【问题描述】：

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

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

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

【问题讨论】：

在这里查看我关于 flex 和 flex-grow 的回答：***.com/a/52975265/1599699

【参考方案1】：

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

【讨论】：

我不完全确定，但我认为这种方法可能存在问题，因为文本框的边框和填充占用了一些添加到宽度的内容。也就是说，如果 td 是 100px 宽并且文本框有 1px 边框和 4px 内边距，那么如果设置为 comcopy">哈！就如此容易！在 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规则