如何使5px填充的输入元素填充整个<td>?

我早在2010年就提出过这个问题,据我所知当时还没有一个合理的解决方案。

但是,由于CSS3,现在有两种解决方案可供选择:

使用 box-sizing

box-sizing: border-box;
width: 100%;

使用 calc

width: calc(100% - 10px);

一些浏览器可能需要供应商预处理(例如 width: -moz-calc(100% - 10px); )

检查为列指定的宽度。可能是因为这个问题。

如果你把它改成 display: block 它将展开以填充父级的宽度。

见 http://www.w3schools.com/css/css_boxmodel.asp

这听起来似乎不太管用,因为CSS的宽度仅限于内容,而且填充也是附加的。

因此,如果您将内容指定为100%,填充为5px,那么总计为100%+5px。

在这种情况下,您似乎真的不需要填充,因为它是td中唯一的元素,所以我可能会考虑重写元素上继承的填充值,至少是左右两边,例如:

<input type="text" style="width:100%; padding-left:0px; padding-right:0px;"/>

另一种方法是使用较小的百分比,如95%或90%。