如何删除表格行之间的空白

我实际上正在研究一些对学校来说很容易的事情，但我很失败。我试图得到这个结果，但是我在表格行之间有一个空格。如果这个问题得到解决，我会很高兴。如果你应该有一些时间，可否请告诉我为什么 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

如何删除表格行之间的空白

回答

相关问题