CSS将边距底部添加到具有带边框的背景色的<tr>

在HTML表格中，<tr> 元素代表表格的一行。通常情况下，<tr> 元素本身并不直接支持设置边距（margin），因为它是块级元素，但其边距行为受到其内部单元格（<td> 或 <th>）的影响。如果你想要给带有边框和背景色的 <tr> 添加底部边距，可以通过以下几种方法实现：

方法一：使用CSS伪元素

你可以使用CSS伪元素 ::after 为 <tr> 创建一个底部边距的效果。

<style>
  tr.bordered-row {
    position: relative;
    border: 1px solid #000;
    background-color: #f0f0f0;
  }
  tr.bordered-row::after {
    content: '';
    display: block;
    height: 10px; /* 设置你想要的底部边距高度 */
  }
</style>

<table>
  <tr class="bordered-row">
    <td>内容1</td>
    <td>内容2</td>
  </tr>
  <!-- 其他行 -->
</table>

方法二：使用内联样式或外部样式表为每个单元格添加底部填充

另一种方法是为 <td> 或 <th> 元素添加底部填充（padding），这样可以间接地为整行创建底部边距的效果。

<style>
  .bordered-cell {
    padding-bottom: 10px; /* 设置你想要的底部边距高度 */
    border: 1px solid #000;
    background-color: #f0f0f0;
  }
</style>

<table>
  <tr>
    <td class="bordered-cell">内容1</td>
    <td class="bordered-cell">内容2</td>
  </tr>
  <!-- 其他行 -->
</table>

方法三：使用CSS Grid或Flexbox布局

如果你的表格结构允许，可以考虑使用CSS Grid或Flexbox来布局表格内容，这样可以更灵活地控制行与行之间的间距。

<style>
  .table-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px; /* 控制行与行之间的间距 */
  }
  .table-row {
    border: 1px solid #000;
    background-color: #f0f0f0;
    display: contents; /* 让子元素作为grid的直接子项 */
  }
  .table-cell {
    padding: 5px;
  }
</style>

<div class="table-container">
  <div class="table-row">
    <div class="table-cell">内容1</div>
    <div class="table-cell">内容2</div>
  </div>
  <!-- 其他行 -->
</div>