Recipe page

Community feedback

• 

  Perry_Y_Z•130

  @Perry2004

  Posted 8 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 behavior

  01

  Marked as helpful