CODEWITHSUNDEEP
htmlcsshtml-table
Lucas Verhoest
Lucas Verhoest

Reputation: 275

How to remove white space between table rows

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?

enter image description here

but instead I'm getting this result:

enter image description here

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:[email protected]?subject=zeepkist">e-mail naar [email protected]</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>

Upvotes: 1

Views: 691

Answers (2)

UncaughtTypeError
UncaughtTypeError

Reputation: 8752

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:[email protected]?subject=zeepkist">e-mail naar [email protected]</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>

Upvotes: 2

Derek Brown
Derek Brown

Reputation: 4419

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:[email protected]?subject=zeepkist">e-mail naar [email protected]</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>

Upvotes: 2

Related Questions