csscss-tables

How to remove the table border-bottom gap?


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


Solution

  • 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.