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

Posted 2023-03-05

【中文标题】如何将边框半径设置为表格边框？ [复制]

【英文标题】：How to set border radius to table border? [duplicate]

【发布时间】：2016-01-13 10:16:18

【问题描述】：

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 的边框都是半径。

有什么办法可以做到吗？

【问题讨论】：

***.com/questions/628301/…

【参考方案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;