如何消除表格边框底部间隙？

Question

我试图在每个数据部分下放置一个边框底部，但它在第一列和第二列之间有一个分割。我不知道如何删除列之间的空间。我尝试使用

hr

标签，但我意识到使用边框效果更好，但我似乎找不到删除此换行符的方法。

我还需要删除最后一行，因此只有三行分隔每个数据部分。我尝试添加一个类并将 border-bottom 设置为白色、透明和 0，看看它是否有效，但没有骰子。

下面是我当前的代码和网站的照片。

      table {
        width: 100%;
      }

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

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

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

如您所见，每列行中都有一个分割线，并且在需要删除的数据的最后一部分之后有一行。 当前代码结果

Answer 1

使用border-collapse：折叠；在表格上删除列边框之间的分隔。对于最后一行，添加一个类并设置 border-bottom: none;.

这是更新后的 CSS：

table {
  width: 100%;
  border-collapse: collapse;
}

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

.no-border td {
  border-bottom: none;
}

HTML：

<tr class="no-border">
  <td>Fat</td>
  <td class="amount">22g</td>
</tr>

这将在每个部分下创建连续的线条并删除最终的边框。