테이블이 둥근 모서리가되지 않는 이유는 무엇입니까?

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>

012,351,641에서 border-collapse: collapse;를 제거해야

Answer 3

나는 위의 답변에 동의해야합니다. 반올림 된 테두리는 border-collapse: collapse;으로 작동하지 않습니다. 이 스타일을 제거해보십시오.