如何消除表格border-bottom间隙及移除最后一行边框？

核心问题解决 #

1. 消除列边框间隙：给表格添加border-collapse: collapse属性，让单元格边框合并，彻底解决列间间隙问题。
2. 移除最后一行边框：针对no-border类的行，给其内部单元格设置border-bottom: none，覆盖全局td的边框样式。

修改后的代码 #

CSS

table {
  width: 100%;
  border-collapse: collapse; /* 合并单元格边框，消除间隙 */
}

.amount {
  font-weight: 700;
  color: hsl(14, 45%, 36%);
}

td {
  border-bottom: solid hsl(30, 18%, 87%) 1px;
}

/* 精准移除最后一行的底部边框 */
.no-border td {
  border-bottom: none;
}

HTML

<table class="nutrition-table">
  <tr>
    <td class="table-row">Calories</td>
    <td class="table-row amount">277kcal</td>
  </tr>
  <tr>
    <td class="table-row">Carbs</td>
    <td class="table-row amount">0g</td>
  </tr>
  <tr>
    <td class="table-row">Protein</td>
    <td class="table-row amount">20g</td>
  </tr>
  <tr class="no-border">
    <td class="table-row">Fat</td>
    <td class="table-row amount">22g</td>
  </tr>
</table>

关键说明 #

• border-collapse: collapse会让表格相邻单元格的边框合并为一条连续线条，从根源消除列边框间隙。
• 之前设置白色、透明边框无效，是因为全局td样式优先级更高，通过.no-border td的精准选择器可以直接覆盖原有样式，确保最后一行无底部边框。

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