如何將邊框半徑設置爲表格邊框？

Question

table { 
 
    width:100%; 
 
} 
 

 
table, td, tr { 
 
    border: 1px #000000 solid; 
 
    border-collapse: collapse; 
 
    border-radius: 10px; 
 
} 
 

 
tr { 
 
    height:50px; 
 
} 
 

 
.price { 
 
    width: 65%; 
 
    text-align: center; 
 
    background-color: #000000; 
 
    color: #ffffff; 
 
    font-size: 1.5em; 
 
    border-color: #c0c0c0; 
 
    border-radius: 10px; 
 
} 
 

 
.buy { 
 
    width:35%; 
 
    text-align: center; 
 
    background-color: red; 
 
    color: #ffffff; 
 
    border-color: #c0c0c0; 
 

 
}

<table> 
 
      <tr> 
 
      <td class="price">$180</td> 
 
      <td class="buy">Buy</td> 
 
      </tr> 
 
      <tr> 
 
      <td class="price">$180</td> 
 
      <td class="buy">Buy</td> 
 
      </tr> 
 
      <tr> 
 
      <td class="price">$180</td> 
 
      <td class="buy">Buy</td> 
 
      </tr> 
 
     </table>

我嘗試邊界半徑設置爲我的 「TD」，但沒有工作。

我想要它看起來像是左右兩側的td的邊界是半徑。

有什麼辦法可以做到這一點？

Answer 1

這裏是你jsfiddle：

table { 
    width:100%; 
    background: #000; 
    border: #000 1px solid; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
} 
td, tr { 
    border: 1px #000000 solid; 
    border-collapse: collapse; 
    border-radius: 10px; 
}