為什么我的桌子沒有圓角？

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> 

但是，即使我對子元素和父元素應用了邊界半徑，我仍然沒有圓角，為什么？ 我的表仍然如下所示：

為什么我沒有圓角？

我看到了這個線程，但並沒有真正的幫助。

Answer 1

您應該刪除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 2

不會與

 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 3

我必須同意以上答案。 圓角邊界不會與border-collapse: collapse;一起工作border-collapse: collapse; 。 嘗試刪除此樣式。