Css 为什么当我增加填充时表格单元格会增加？_Css

Css 为什么当我增加填充时表格单元格会增加？

css

Css 为什么当我增加填充时表格单元格会增加？,css,Css,我正在使用这个css代码来设置表格单元格的样式 td{ padding: .2vw; width: 8vw; height: 8vw; } 当我增加填充物时，我的细胞变宽了。为什么会这样？我想宽度已经包括了填充物。如何设置单元格的实际宽度编辑：以下是一个完整的示例： <html> <head> <meta charset="UTF-8"> <title>Example</title> <style>

我正在使用这个css代码来设置表格单元格的样式

td{
    padding: .2vw;
    width: 8vw;
    height: 8vw;
}

当我增加填充物时，我的细胞变宽了。为什么会这样？我想宽度已经包括了填充物。如何设置单元格的实际宽度

编辑：以下是一个完整的示例：

<html>
<head>
<meta charset="UTF-8">
<title>Example</title>
<style>
body{
    padding: 0px;
    margin: 0px;
    font-family: Verdana, Geneva, sans-serif;
    text-align: center;
}
table{
    font-size: 1em;
    border-spacing: 0.7vw;
    background-color: #003d1b;
    margin: auto;
    margin-top: 0px;
    box-sizing: border-box;
}
td{
    background-color: #00551b;
    font-size: 2em;
    padding: 1vw;
    cursor: pointer;
    width: 8vw;
    height: 8vw;
    box-sizing: border-box;
}
</style>
</head>

<body>
<table>
    <tr>
        <td>1</td><td>2</td><td>3</td>
    </tr>
    <tr>
        <td>4</td><td>5</td><td>6</td>
    </tr>
</table>
</body>
</html>


例子
身体{
填充：0px；
边际：0px；
字体系列：Verdana，日内瓦，无衬线；
文本对齐：居中；
}
桌子{
字号：1em；
边界间距：0.7vw；
背景色：#003d1b；
保证金：自动；
边际上限：0px；
框大小：边框框；
}
运输署{
背景色：#00551b；
字号：2em；
填充物：1vw；
光标：指针；
宽度：8vw；
高度：8vw；
框大小：边框框；
}
123
456

添加框大小：边框框；运输署署长

td{
    padding: .2vw;
    width: 8vw;
    height: 8vw;
    box-sizing:border-box;
}

您需要在表格上添加“宽度：100%”或固定宽度（500px）

table {
  table-layout: fixed;
  width: 100%
}

如果你不想增加填充时的高度，也可以使用“框大小：边框框；”在td中

td{
    padding: 1.2vw;
    width: 8vw;
    height: 8vw;
    box-sizing:border-box;
}

不，不包括填充物。尝试设置框大小：边框框；尝试“框大小：边框框；”不会改变任何东西：（尝试使用它。@nazifarashid没有帮助。不幸的是，这不会改变任何东西。你能分享演示吗？我在我的问题中添加了一个工作示例。单元格应该是正方形，但它们更宽。在我尝试过的每个浏览器中（Firefox和Chrome）。您在表中添加了框大小：border box；。您必须将其添加到td中。我也将其添加到了td中。没有任何更改。在我的示例中，它在表中，因为在我开始我的问题之前就已经存在了。“宽度：100%”将我的表格拉伸至全屏宽度。这不是我想要的。我希望每个单元格的宽度为8vw。您可以在px中添加一个固定宽度的离子表格，增加多少宽度例如最大宽度：300px；