html - 为什么在某些情况下 td 大小不同

Question

当我尝试制作html表格时，我想知道为什么

1. td填充单元格和其他单元格的大小不同。这是从哪里来的padding？

2. 即使将填充任何内容，如何在每个单元格中设置相同的大小？

如果有人遇到同样的问题，请告诉我。谢谢

td {
  padding: 5px;
  border: 1px solid black;
}

<table>
  <td>1</td>
  <td></td>
</table>

标签： htmlcss

Answer 1

您的表格没有固定宽度，因此里面的单元格只会占用其内容所需的空间。

但是，如果您的表格具有固定宽度，您可以使用它table-layout来确保所有单元格保持相同大小：

另请注意，您的表中缺少必需的标记：

table{
  table-layout: fixed;
  width: 10rem;
}

td {
  padding: 5px;
  border: 1px solid black;
};

<table>
  <tbody>
    <tr>
      <td>1</td>
      <td></td>
    </tr>
  </tbody>
</table>