如何为表格tr行设置带圆角的背景色 避免单元格中间留白问题

出现单元格中间区域未填充背景色的问题，核心是两个布局配置错误：

• 表格默认存在border-spacing单元格间距，两个td之间的空隙不属于任何一个单元格，单独给td加背景色时不会覆盖这部分区域
• 你给第一个td设置了d-inline-block类，将td原生的table-cell显示属性强行改为行内块，破坏了表格单元格自动贴合的布局逻辑，额外产生了多余间距

有两种常用实现方式，都可以实现带圆角的整行背景效果： #

方式1：给tr整行加背景（推荐，代码最少） #

直接给目标tr设置背景和圆角，同时清除表格默认的单元格间距即可，代码示例：

<style>
.price-table {
  /* 清除默认单元格间距 */
  border-spacing: 0;
  width: 200px; /* 可根据需求调整表格宽度 */
}
.price-table tfoot tr {
  /* 自定义背景色 */
  background-color: #f5f5f5;
  /* 设置圆角大小 */
  border-radius: 8px;
  /* 让背景裁切到圆角边界，避免背景溢出圆角 */
  overflow: hidden;
  /* 让tr的border-radius生效，兼容不同浏览器 */
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
}
</style>

<table class="price-table">
  <tfoot>
    <tr>
      <td class="ltr font-14 font-weight-bold">Price:</td>
      <td class="text-right text-primary">1600$</td>
    </tr>
  </tfoot>
</table>

方式2：保留td单独样式的实现方案 #

如果需要给两个td设置不同的背景色，可以单独给td加背景，分别设置对应圆角，代码示例：

<style>
.price-table {
  border-spacing: 0;
  width: 200px;
}
.price-table tfoot td:first-child {
  background-color: #f5f5f5;
  border-radius: 8px 0 0 8px;
  padding: 8px 0 8px 12px;
}
.price-table tfoot td:last-child {
  background-color: #f5f5f5;
  border-radius: 0 8px 8px 0;
  padding: 8px 12px 8px 0;
  text-align: right;
  width: 100%;
}
</style>

<table class="price-table">
  <tfoot>
    <tr>
      <!-- 移除了多余的d-inline-block类，避免破坏表格布局 -->
      <td class="ltr font-14 font-weight-bold">Price:</td>
      <td class="text-primary">1600$</td>
    </tr>
  </tfoot>
</table>

• 非必要不要修改td默认的display: table-cell属性，会丢失表格原生的自适应对齐、等高布局等特性
• 如果表格还有其他行，注意不要把针对tfoot行的样式写到全局table/tr/td选择器上，避免影响其他区域的表格样式

内容的提问来源于stack exchange，提问作者agoumi