填充改变桌子内的宽度 [英] Padding changes width inside table

问题描述

我有一个宽度固定的表，并且在表内部需要具有与表相同宽度的 inputs(text)，但是我不希望输入输入要在 left:0 处，我希望它们从左边起一些填充.但是，当我在这些输入中使用填充时，宽度更改会大于 100％.

I have a table that has fixed width, and inside the table I need to have some inputs(text) that has the same width of the table, but I don't want the text of the inputs to be at left:0, I want them to have some padding from the left. But when I put the padding to those inputs the width changes to more than 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％?

How can I ensure that the width of the input element is 100% the width of the table cell?

检查小提琴

推荐答案

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

add this css rule to your input:

box-sizing: border-box;

box-sizing属性用于告诉浏览器什么大小属性(宽度和高度)应包括在内.

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>

这篇关于填充改变桌子内的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！