border-collapse and border-spacing does not work.
How to fix it?

  body { font-family: Arial, Verdana, sans-serif; color: #111111; } table { width: 600px; } th, td { border-collapse: collapse; padding: 7 px 10px 10px 10px; } th { border-top: 1px solid #999999; border-bottom: 2px solid black; text-transform: uppercase; letter-spacing: 0.1em; font-size: 90%; text-align: left; } td { border: 2px solid black; border-collapse: collapse; } tr.grey { background-color: rgba(56, 56, 56, 0.1); } tr:hover { background-color: khaki; } .money { text-align: right; } 
 <table> <tr> <th>Автор</th> <th>Название</th> <th class="money">Зарегистрированная цена</th> <th class="money">Текущая ставка</th> </tr> <tr class="grey"> <td>Matt Stone, Trey Parker</td> <td>South Park</td> <td></td> <td class="money">500 000$</td> </tr> <tr> <td>Sony</td> <td>PS4</td> <td class="money">100 000$</td> <td class="money">1000000$</td> </tr> <tr class="grey"> <td>Microsoft</td> <td>Xbox One</td> <td class="money">100 000$</td> <td class="money">521 600$</td> </tr> </table>

  • 2
    border-collapse: collapse; - for the table, not for the cells - Deonis
  • 3
    I forgot to add that border-spacing will not work if border-collapse to collapse , but this should be clear. - Deonis
  • @Deonis thanks. Yes, I really understand that border-spacing will not work if border-collapse has a collapse value)) - JustLearn pm

1 answer 1

It does not work and should not in this case, since you applied this property to the cells, but it had to be applied to the table as a whole.

border-collapse - sets how to display borders around table cells. This property plays a role when a frame is set for the cells, then at the junction of the cells a double thickness line will be obtained. The collapse value causes the browser to analyze such places in the table and remove double lines in it. At the same time between the cells there is only one border, simultaneously belonging to both cells. The same rule applies to the outer borders when a frame is added around the table itself.

 body { font-family: Arial, Verdana, sans-serif; color: #111111; } table { width: 600px; border-collapse: collapse; } th, td { padding: 7 px 10px 10px 10px; } th { border-top: 1px solid #999999; border-bottom: 2px solid black; text-transform: uppercase; letter-spacing: 0.1em; font-size: 90%; text-align: left; } td { border: 2px solid black; } tr.grey { background-color: rgba(56, 56, 56, 0.1); } tr:hover { background-color: khaki; } .money { text-align: right; } 
 <table> <tr> <th>Автор</th> <th>Название</th> <th class="money">Зарегистрированная цена</th> <th class="money">Текущая ставка</th> </tr> <tr class="grey"> <td>Matt Stone, Trey Parker</td> <td>South Park</td> <td></td> <td class="money">500 000$</td> </tr> <tr> <td>Sony</td> <td>PS4</td> <td class="money">100 000$</td> <td class="money">1000000$</td> </tr> <tr class="grey"> <td>Microsoft</td> <td>Xbox One</td> <td class="money">100 000$</td> <td class="money">521 600$</td> </tr> </table>

Pay attention to @Deonis comments about the operation of this property.

References:

About border-collapse property on MDN
CSS border-collapse Property
W3.org about border-collapse