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

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

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

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

Answer 4

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

这样的事情：

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

Answer 5

CSS应该可以解决问题：

#my_input {
    width: 100%;
}

#my_table {
    table-layout:fixed;
}

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

5 个答案: