html - 填充改变表格内的宽度

Question

我有一个固定宽度的表格，在表格内我需要一些 inputs(text) 具有与表格相同的宽度，但我不想要文本输入位于 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%？

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>