テーブルが丸くなっていないのはなぜですか？

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スレッドを見ましたが、実際には役に立ちません。

border-collapse: collapse; 

使用して

Answer 1

文句を言わない仕事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

あなたは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>

から border-collapse: collapse;を削除する必要があります

Answer 3

私は上記の回答に同意する必要があります。丸まったボーダーはborder-collapse: collapse;で動作しません。このスタイルを削除してみてください。