如何刪除表格行之間的空白

我實際上正在研究一些對學校來說很容易的事情，但我很失敗。我試圖得到這個結果，但是我在表格行之間有一個空格。如果這個問題得到解決，我會很高興。如果你應該有一些時間，可否請告訴我爲什麼 td > h3,p{ padding-left: .5rem;padding-bottom: 1rem;}只適用於中間td？如何刪除表格行之間的空白

而是我得到這個結果：

我的代碼是這樣的：

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>

來源

2017-10-16 Lucas Verhoest

[設置的cellpadding和CSS CELLSPACING？（可能的重複https://stackoverflow.com/questions/339923/set-cellpadding-and-cellspacing-in- css） – Roberrrt

添加border-collapse: collapse;到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>

來源

2017-10-16 18:41:29 UncaughtTypeError

高興地幫助:) – UncaughtTypeError

您應該添加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>

來源

2017-10-16 18:40:53

如何刪除表格行之間的空白

回答

相關問題