I am trying to place a border-bottom under each section of data, but it has a split between the first and second columns. I'm not sure how to remove this space between the columns. I tried using an hr
tag, but I realised using borders works better, but I can't seem to find a way to remove this line break.
I also need to remove the last line, so there are only three lines separating each section of data. I have tried adding a class and setting the border-bottom to white, transparent and 0 to see if it would work, but no dice.
Below is my current code and a photo of the website.
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>
As you can see there is a split in each column line, and a line after the final section of data that needs to be removed. Current code outcome
Use border-collapse: collapse; on your table to remove the split between column borders. For the last row, add a class and set border-bottom: none;.
Here’s the updated 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>
This will create continuous lines under each section and remove the final border.