Perry_Y_Z• 130
@Perry2004
Posted
Nice job! The implementation looks very similar to the design picture. The only problem i found is that your table is not working correctly. Here's my approach for the table:
<section id="nutrition">
<h2>Nutrition</h2>
<p>The table below shows nutritional values per serving without the additional fillings.</p>
<table>
<tr>
<th>Calories</th>
<td>277kcal</td>
</tr>
<tr>
<th>Carbs</th>
<td>0g</td>
</tr>
<tr>
<th>Protein</th>
<td>20g</td>
</tr>
<tr>
<th>Fat</th>
<td>22g</td>
</tr>
</table>
</section>
and my css
#nutrition table {
width: 100%;
border-collapse: collapse;
text-align: left;
margin-top: 1rem;
;
}
#nutrition tr {
border-top: 1px solid var(--stone-900);
height: 3rem;
;
width: 50%;
}
#nutrition tr:first-child {
border-top: none;
}
#nutrition th {
padding-left: 2rem;
width: 50%;
color: var(--stone-600);
text-shadow: none;
}
#nutrition td {
color: var(--brown-800)
}
So to create a table with headers on the left, you can just put <th>
and <td>
in the same row. And I used this line #nutrition tr:first-child { border-top: none; }
to clear the top border on the first row to get the desired behavior
Marked as helpful
0
gvcarmo• 80
@gvcarmo
Posted
@Perry2004 Thankyou!
0