我可以在表格列的宽度上填充输入元素吗？

Question

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

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

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

Answer 2

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

在实践中,这还不够,似乎有些浏览器强调了对风格INPUT的size忠诚.因此,例如,Chrome扩展了元素以符合大小,从而扩大了表格列.设置size=0不起作用,因为它默认为某个有效值.但是,元素的设置size=1属性会达到INPUT所需的行为.但是,这不是仅限CSS的解决方案,并且INPUT不能压缩到一定宽度以下.

Answer 3

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

像这样的东西：

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