我可以让输入元素填充表格列的宽度吗？答案

【问题标题】：Can I have an input element fill the width of a table column?我可以让输入元素填充表格列的宽度吗？
【发布时间】：2011-12-23 05:31:55
【问题描述】：

我希望 input[type=text] 元素的宽度始终与其所在的表格单元格相同。我需要确保表格单元格的宽度不受输入元素宽度的影响.

如何使用 CSS 做到这一点？我需要使用JS吗？如果是这样，确定表格单元格何时更改大小的最佳方法是什么？

【问题讨论】：

如果你想要一个更好的答案，我认为你应该给你的答案一些 cmets，特别是因为我们需要了解我们是否在正确的方法上解决你的问题。

标签： javascript html css input

【解决方案1】：

如果这对你有用：

td > input[type='text']
{
    width: 100%; /*this will set the width of the textbox equal to its container td*/
}

试试这个：

td > input[type='text']
{
    display:block; /*this will make the text box fill the horizontal space of the its container td*/
}

【讨论】：

"width: 100%" 对我有用，但 "display: block" 不行。

【解决方案2】：

为 INPUT 元素设置 CSS 规则 width:100%; 和 display:block; 应该这样做。

实际上，这还不够，似乎有些浏览器强调INPUT 的size 属性而不是样式。因此，例如，Chrome 将元素加宽以与大小一致，从而加宽表格列。设置size=0 不起作用，因为它默认为某个有效值。但是，在 INPUT 元素处设置 size=1 属性可以实现所需的行为。但是，这不是纯 CSS 的解决方案，INPUT 不能被压缩到某个小宽度以下。

【讨论】：

【解决方案3】：

将字段的宽度设置为 100% 应该可以。在这种情况下，您还需要添加 box-sizing 规则以避免输入字段过度忽略表格单元格填充。

td.value input {
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

参见示例http://jsfiddle.net/MEARG/

【讨论】：

【解决方案4】：

如何设置样式（或类）宽度：100%；对于表格内的输入元素？

类似这样的：

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

【讨论】：

【解决方案5】：

CSS 应该可以解决问题：

#my_input {
    width: 100%;
}

#my_table {
    table-layout:fixed;
}

【讨论】：