HTML 表中的文本框：如何自动调整大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2190550/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
textboxes in HTML table: How to auto-size?
提问by Serge Wautier
I want to add a row at the bottom of my HTML table (or at the top, whatever) with a textbox in each column (to allow filtering of content of each column).
我想在我的 HTML 表格的底部（或顶部，无论如何）添加一行，每列中有一个文本框（以允许过滤每列的内容）。
FWIW, the table is based on the jQuery DataTables plug-in.
FWIW，该表基于 jQuery DataTables 插件。
The problem is that the textboxes widen the columns. I want each textbox to fill the width of its column without enlarging it. How can I do this?
问题是文本框加宽了列。我希望每个文本框在不扩大它的情况下填充其列的宽度。我怎样才能做到这一点？
回答by ntan
try <input type="text" style="width:100%"/>to get the width of parent td.
尝试<input type="text" style="width:100%"/>获取父 td 的宽度。
回答by bobince
I think [width 100%] could be a problem with this approach since the borders and padding of the text box take up some with that is added to the width.
我认为 [width 100%] 可能是这种方法的一个问题，因为文本框的边框和填充会占用一些添加到宽度的内容。
Indeed.
的确。
You can compensate for this by adding padding-rightto the cell containing the input (or just to all cells) of similar size to the borders-and-padding of the input. The input then expands out of the cell content area, but only onto the padding so it doesn't make a mess.
您可以通过添加padding-right到包含与输入的边框和填充大小相似的输入（或仅添加到所有单元格）的单元格来对此进行补偿。然后输入扩展到单元格内容区域之外，但仅扩展到填充上，因此不会弄乱。
That's OK for just normal text inputs. If you've also got other elements such as select boxes or buttons you wish to resize this way, the padding method can backfire because on IE the ‘width' of a select is inclusive of the border and padding (due to being an OS widget).
这对于普通的文本输入是可以的。如果您还有其他元素，例如您希望以这种方式调整大小的选择框或按钮，则填充方法可能会适得其反，因为在 IE 上，选择的“宽度”包括边框和填充（由于是操作系统小部件） ）。
For most browsers, the easiest and most consistent way to fix this is the CSS3 box-sizingproperty:
对于大多数浏览器，解决这个问题的最简单和最一致的方法是 CSS3 box-sizing属性：
td.input input {
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
IE6-7 doesn't support this yet, so you can still get fields that don't quite line up in these browsers. If you care, you can add a padding workaround specifically for those.
IE6-7 尚不支持此功能，因此您仍然可以获得在这些浏览器中不太对齐的字段。如果您关心，您可以专门为这些添加填充解决方法。
回答by David says reinstate Monica
I've not used jQuery Tables, but I assume that if you set 'width: 80%;' and define a width for the 'td,' the text-box should inherit its dimensions from its parent (the 'td').
我没有使用过 jQuery 表格，但我假设如果你设置了 'width: 80%;' 并为“td”定义宽度，文本框应从其父项（“td”）继承其尺寸。
If that doesn't work, or you want a different approach, you could try:
如果这不起作用，或者您想要不同的方法，您可以尝试：
td > input[type="text"] {width: 5em;} /* or whatever */
回答by rashidnk
table td {white-space: nowrap;}
table th {white-space: nowrap;}
td input[type="text"] {width: 100%;}
use !importantto override other css rules
用于!important覆盖其他 css 规则
