内边距改变 table 内的宽度

Question

我有一个具有固定宽度的 table，在 table 内部我需要一些 inputs(text) 与 table 具有相同的宽度，但是我不希望输入的文本位于 left:0，我希望它们在左侧有一些填充。但是，当我将填充放入这些输入时，宽度会更改为超过 100%.

这里是HTML:

<table cellspacing="25">
    <tr>
        <td><input type="text" placeholder="lalala"></td>
    </tr>
</table>

这是 CSS。

table {
    background-color: red;
    width: 300px;
}
table input {
    width: 100%;
    padding-left: 10px;
}

如何确保输入元素的宽度是 100% table 单元格的宽度？

Check the fiddle

Answer 1

将此 css 规则添加到您的输入中：

box-sizing: border-box;

The box-sizing property is used to tell the browser what the sizing properties (width and height) should include.

Should they include the border-box? Or just the content-box.

这是一个片段：

table {
    background-color: red;
    width: 300px;
}
table input {
    width: 100%;
    padding-left: 10px;
    box-sizing: border-box;
}

<table cellspacing="25">
    <tr>
        <td><input type="text" placeholder="lalala"></td>
    </tr>
</table>

Answer 2

另一种选择是用百分比计算输入的宽度和填充。如果元素的内容、边框、边距和填充的总和为 100%，那么它应该符合您的要求。参见css中的box-model概念：http://www.w3schools.com/css/css_boxmodel.asp

All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout.

The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.

The box model allows us to add a border around elements, and to define space between elements.

例如，如果您想要 10% padding 在左边，那么宽度应该是 90%。

看到这个fiddle：http://jsfiddle.net/3nk07y1x/1/

CSS:

table {
    background-color: red;
    width: 300px;
}
table input { 
    width: 90%;
    padding-left: 10%;
}

Answer 3

您可以在 CSS 中使用 box-sizing: border-box; (support) 其中 "The width and height properties include the padding and border, but not the margin." 作为指定元素，正如@1l13v 在他的回答中所做的那样:

table input {
   box-sizing: border-box;
}

或者您可以使用 calc function (support):

table input {
    width: calc( 100% - 10px );
}

Answer 4

table 的宽度将是宽度加上填充。尝试从宽度中减去一些百分点，如下所示：

table input {
  width: 90%;
  padding-left: 1em;
}

我也会将像素更改为 ems，因为这些在不同的屏幕分辨率下会稍微多一些table。

内边距改变 table 内的宽度

Padding changes width inside table

html

css

html-table

padding