Как убрать разрыв между границей и нижним краем таблицы? ⇐ CSS

[Anonymous]

Я пытаюсь разместить нижнюю границу под каждым разделом данных, но между первым и вторым столбцами есть разделение. Я не уверен, как убрать это пространство между столбцами. Я попробовал использовать тег hr, но понял, что использование границ работает лучше, но я не могу найти способ удалить этот разрыв строки.
Мне также нужно удалите последнюю строку, чтобы каждый раздел данных разделялся только тремя строками. Я попытался добавить класс и установить нижнюю границу белого, прозрачного и 0, чтобы посмотреть, будет ли это работать, но безрезультатно.
Ниже приведен мой текущий код и фотография сайт.

Код: Выделить всё

      table {
width: 100%;
}

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

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

Код: Выделить всё

Calories
277kcal


Carbs
0g


Protein
20g


Fat
22g

Как вы можете видеть, в каждой строке столбца есть разделение, а также строка после последнего раздела данных, который необходимо удалить.
Текущий результат кода

Подробнее здесь: https://stackoverflow.com/questions/791 ... bottom-gap