我可以让一个输入元素填充表格列的宽度吗?

Can I have an input element fill the width of a table column?

本文关键字：表格 填充 元素 输入 一个 我可以      更新时间：2023-09-26

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

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

如果可以的话:

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*/
}

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

在实践中，这是不够的，似乎一些浏览器强调INPUT的size属性超过样式。例如，Chrome会扩大元素以适应大小，从而扩大表格列。设置size=0不起作用，因为它默认为一些有效的值。但是，在INPUT元素上设置size=1属性可以实现所需的行为。然而，这不是css的唯一解决方案，INPUT不能被压缩到一定的宽度以下。

将字段宽度设置为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/

如何设置style(或class) width: 100%;对于表内的输入元素?

像这样:

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

CSS应该做到这一点:

#my_input {
    width: 100%;
}
#my_table {
    table-layout:fixed;
}
相关文章：