CSS将边距底部添加到具有带边框的背景色的<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>

<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>

<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>