css如何让tr之间有间距

在HTML的表格中，当我们使用tr标签添加多行数据时，常常需要控制每行数据之间的间距，以便让表格更加整洁美观。那么，CSS如何帮助我们实现这个效果呢？ 首先，我们可以使用CSS中的border-spacing属性。这个属性表示表格单元格之间的间距，它需要和border-collapse属性一起使用。 假设我们有一个表格的HTML代码如下：

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Tom</td>
    <td>20</td>
  </tr>
  <tr>
    <td>Lucy</td>
    <td>22</td>
  </tr>
</table>

我们可以在CSS中添加以下代码：

table {
  border-collapse: separate; /*分隔单元格*/
  border-spacing: 10px; /*设置单元格之间的间距为10px*/
}

这就可以在每行数据之间添加10px的间距。 除了border-spacing属性，我们也可以使用padding或margin属性来控制tr之间的间距。例如，我们可以使用以下代码来添加间距：

tr {
  margin-bottom: 10px; /*增加每行数据之间的下边距*/
}

这样可以确保每行数据之间的距离相同，而不需要为整个表格添加间距。 总之，通过CSS的各种属性，我们可以轻松地控制表格的各个部分，使其达到我们想要的效果。为了让表格更加美观，我们可以根据实际情况灵活运用这些属性，来实现页面的最佳效果。