爲什麼我的桌子不會變成圓角？

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

您應該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;工作。嘗試刪除這種風格。