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

Question

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

1. td的大小在填充的单元格和其他单元格之间是不同的。 来自padding？

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

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

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

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

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>