Почему мой стол не округляет углы?

Question

У меня есть эта таблица на этой странице. Теперь мне нужен радиус границы на столе, так что есть у применены следующие стили:

.toy-cart-table > thead > tr { 
 
    background: #f9bbcf; 
 
    border-radius: 10px; 
 
    /* padding-left: 2.00em; */ 
 
    border: 1px solid #cccccc; 
 
    border-top-right-radius: 10px; 
 
    border-top-left-radius: 10px; 
 
} 
 

 
.toy-cart-table > thead > tr > th { 
 
    padding: 0.75em; 
 
    padding-left: 1.78em; 
 
    font-size: 1.12em; 
 
    border-top-right-radius: 10px; 
 
    border-top-left-radius: 10px; 
 
    /* border: 1px solid #cccccc; */ 
 
} 
 

 
.toy-cart-table { 
 
    width: 100%; 
 
    /* border: 1px solid #cccccc; */ 
 
    border-top-right-radius: 10px; 
 
    border-top-left-radius: 10px; 
 
    border-collapse: collapse; 
 
}

<table class="toy-cart-table"> 
 
    <thead> 
 
     <tr> 
 
      <th colspan="2">Toys to be Returned</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
      <td><img src="images/res/toy-cart/1.png" alt="toy cart image"></td> 
 
      <td><p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.</p></td> 
 
     </tr> 
 
     <tr> 
 
      <td><img src="images/res/toy-cart/2.png" alt="toy cart image"></td> 
 
      <td><p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.</p></td> 
 
     </tr> 
 
    </tbody> 
 
</table>

Но даже если я радиус границы применительно к детям и родительских элементов я до сих пор не почему? мой стол еще выглядит следующим образом:

Почему я не получаю скругленные углы?

Я видел this нить, но это не очень полезно.

Answer 1

обыкновение работать с

border-collapse: collapse; 

использования border-collapse: unset;

.toy-cart-table { 
border: 1px solid #e8e8e8; 
border-collapse: unset; 
border-top-left-radius: 10px; 
border-top-right-radius: 10px; 
width: 100%; 

}

Answer 2

Вы должны удалить border-collapse: collapse; из toy-cart-table

.toy-cart-table > thead > tr { 
 
     background: #f9bbcf; 
 
     border-radius: 10px; 
 
     /* padding-left: 2.00em; */ 
 
     border: 1px solid #cccccc; 
 
     border-top-right-radius: 10px; 
 
     border-top-left-radius: 10px; 
 
    } 
 

 
.toy-cart-table > thead > tr > th { 
 
    padding: 0.75em; 
 
    padding-left: 1.78em; 
 
    font-size: 1.12em; 
 
    border-top-right-radius: 10px; 
 
    border-top-left-radius: 10px; 
 
    /* border: 1px solid #cccccc; */ 
 
} 
 

 
.toy-cart-table { 
 
    width: 100%; 
 
    border: 1px solid #cccccc; 
 
    border-top-right-radius: 10px; 
 
    border-top-left-radius: 10px; 
 
}

<table class="toy-cart-table"> 
 
       <thead> 
 
        <tr> 
 
         <th colspan="2">Toys to be Returned</th> 
 
        </tr> 
 
       </thead> 
 
       <tbody> 
 
        <tr> 
 
         <td><img src="images/res/toy-cart/1.png" alt="toy cart image"></td> 
 
         <td><p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.</p></td> 
 
        </tr> 
 
        <tr> 
 
         <td><img src="images/res/toy-cart/2.png" alt="toy cart image"></td> 
 
         <td><p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.</p></td> 
 
        </tr> 
 
       </tbody> 
 
      </table>

Answer 3

Я должен согласиться с приведенными выше ответами. Округленные границы не будут работать с border-collapse: collapse;. Попробуйте удалить этот стиль.