如何将边框半径设置为表格边框？ [复制]

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;
}