填充更改表内的宽度

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%的宽度是表格单元格的宽度？

检查小提琴

Answer 1

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

box-sizing: border-box;

box-sizing属性用于告诉浏览器调整属性(宽度和高度)应包含的内容.

它们应该包括边框吗？或者只是内容框.

这是一个片段:

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>