Design comparison
SolutionDesign
Community feedback
- @Perry2004Posted 3 months ago
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 behaviorMarked as helpful0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord