How to remove white space between table rows

Question

I'm actually working on something pretty easy for school but I'm failing on something simple. I'm trying to get this result, but instead I have a white space between the table rows. I'd be really glad if this is fixed. If you should have some time, could you please tell me why the td > h3,p{ padding-left: .5rem;padding-bottom: 1rem;} only applies at the middle td?

but instead I'm getting this result:

My code goes like this:

table{
  border: 1px solid black;
}

th{
  background-color: #F7BF2A;
  padding: .5rem;
  color: white;
}

td{
  border: 1px solid black;
}


td > h3,p{
  padding-left: .5rem;
  padding-bottom: 1rem;
}

<table>
        <tr>
          <th>Wanneer</th>
          <th>Wat</th>
          <th>Waar</th>
        </tr>
        <tr>
          <td class="mid">14u00</td>
          <td>
            <h3>Zeepkistenrace</h3>
            <p>Knutsel jouw zeepkist in elkaar en breng ze mee naar de top van de kemmelberg. Inschrijven kan via <a href="mailto:zeepkisten@burgerfeesten.be?subject=zeepkist">e-mail naar zeepkisten@burgerfeesten.be</a></p>
          </td>
          <td>Kemmelberg</td>
        </tr>
        <tr>
          <td class="mid">19u00</td>
          <td>
            <h3>Eetwedstrijd</h3>
            <p>Wie eet het meeste burgers in 30 minuten? Versla jij het record van 16 burgers? Inschrijven kan de dag zelf aan de bonnentjesstand.</p>
          </td>
          <td colspan="2">Feesttent marktplein</td>
        </tr>
        <tr>
          <td class="mid">20u00</td>
          <td><h3>Mister/Miss KemmelBurger</h3></td>
        </tr>
        <tr>
          <td class="mid">21u00</td>
          <td>
            <h3>Balkan Bonanza</h3>
            <p>Wie de beentjes al eens wil losgooien kan dit perfect doen op de tonen van Balkan Bonanza. Deze groep uit Loker brengt een verrassende mix van balkan en bluegrass. Benieuwd? Afkomen!</p>
          </td>
          <td>Podium</td>
        </tr>
        <tr>
          <td class="mid">22u00</td>
          <td>
            <h3>Bal van de Burger</h3>

            <p>We feesten door tot in de vroege uurtjes met dicobar Bun &amp; Pickles.</p>
            <span>VVK: € 3 - ADD: € 5</span>
          </td>


          <td>Podium en feesttent</td>
        </tr>

      </table>

Possible duplicate of [Set cellpadding and cellspacing in CSS?](https://stackoverflow.com/questions/339923/set-cellpadding-and-cellspacing-in-css) — roberrrt-s, Oct 16 '17 at 18:40

score 2 · Answer 1 · answered Oct 16 '17 at 18:40

You should add the border-collapse: collapse tag to ensure the borders are combined:

table{
  border: 1px solid black;
  border-collapse: collapse;
}

th{
  background-color: #F7BF2A;
  padding: .5rem;
  color: white;
}

td{
  border: 1px solid black;
}


td > h3,p{
  padding-left: .5rem;
  padding-bottom: 1rem;
}

<table>
        <tr>
          <th>Wanneer</th>
          <th>Wat</th>
          <th>Waar</th>
        </tr>
        <tr>
          <td class="mid">14u00</td>
          <td>
            <h3>Zeepkistenrace</h3>
            <p>Knutsel jouw zeepkist in elkaar en breng ze mee naar de top van de kemmelberg. Inschrijven kan via <a href="mailto:zeepkisten@burgerfeesten.be?subject=zeepkist">e-mail naar zeepkisten@burgerfeesten.be</a></p>
          </td>
          <td>Kemmelberg</td>
        </tr>
        <tr>
          <td class="mid">19u00</td>
          <td>
            <h3>Eetwedstrijd</h3>
            <p>Wie eet het meeste burgers in 30 minuten? Versla jij het record van 16 burgers? Inschrijven kan de dag zelf aan de bonnentjesstand.</p>
          </td>
          <td colspan="2">Feesttent marktplein</td>
        </tr>
        <tr>
          <td class="mid">20u00</td>
          <td><h3>Mister/Miss KemmelBurger</h3></td>
        </tr>
        <tr>
          <td class="mid">21u00</td>
          <td>
            <h3>Balkan Bonanza</h3>
            <p>Wie de beentjes al eens wil losgooien kan dit perfect doen op de tonen van Balkan Bonanza. Deze groep uit Loker brengt een verrassende mix van balkan en bluegrass. Benieuwd? Afkomen!</p>
          </td>
          <td>Podium</td>
        </tr>
        <tr>
          <td class="mid">22u00</td>
          <td>
            <h3>Bal van de Burger</h3>

            <p>We feesten door tot in de vroege uurtjes met dicobar Bun &amp; Pickles.</p>
            <span>VVK: € 3 - ADD: € 5</span>
          </td>


          <td>Podium en feesttent</td>
        </tr>

      </table>

UncaughtTypeError · Accepted Answer · 2017-10-16T18:57:19.130

Add border-collapse: collapse; to table.

table {
    border: 1px solid black;
    border-collapse: collapse;
}

table {
    border: 1px solid black;
    border-collapse: collapse;
}

th{
  background-color: #F7BF2A;
  padding: .5rem;
  color: white;
}

td{
  border: 1px solid black;
}


td > h3,p{
  padding-left: .5rem;
  padding-bottom: 1rem;
}

<table>
        <tr>
          <th>Wanneer</th>
          <th>Wat</th>
          <th>Waar</th>
        </tr>
        <tr>
          <td class="mid">14u00</td>
          <td>
            <h3>Zeepkistenrace</h3>
            <p>Knutsel jouw zeepkist in elkaar en breng ze mee naar de top van de kemmelberg. Inschrijven kan via <a href="mailto:zeepkisten@burgerfeesten.be?subject=zeepkist">e-mail naar zeepkisten@burgerfeesten.be</a></p>
          </td>
          <td>Kemmelberg</td>
        </tr>
        <tr>
          <td class="mid">19u00</td>
          <td>
            <h3>Eetwedstrijd</h3>
            <p>Wie eet het meeste burgers in 30 minuten? Versla jij het record van 16 burgers? Inschrijven kan de dag zelf aan de bonnentjesstand.</p>
          </td>
          <td colspan="2">Feesttent marktplein</td>
        </tr>
        <tr>
          <td class="mid">20u00</td>
          <td><h3>Mister/Miss KemmelBurger</h3></td>
        </tr>
        <tr>
          <td class="mid">21u00</td>
          <td>
            <h3>Balkan Bonanza</h3>
            <p>Wie de beentjes al eens wil losgooien kan dit perfect doen op de tonen van Balkan Bonanza. Deze groep uit Loker brengt een verrassende mix van balkan en bluegrass. Benieuwd? Afkomen!</p>
          </td>
          <td>Podium</td>
        </tr>
        <tr>
          <td class="mid">22u00</td>
          <td>
            <h3>Bal van de Burger</h3>

            <p>We feesten door tot in de vroege uurtjes met dicobar Bun &amp; Pickles.</p>
            <span>VVK: € 3 - ADD: € 5</span>
          </td>


          <td>Podium en feesttent</td>
        </tr>

      </table>

How to remove white space between table rows

2 Answers2