Html 使用CSS的圆形边框表格

我有个问题。我有一个纯HTML代码的表格，如下所示：

<table id="calendarTable">
  <tr>
    <th id="tableHeader" colspan=7></th>
  </tr>
  <tr>
    <th>Dom</th>
    <th>Seg</th>
    <th>Ter</th>
    <th>Qua</th>
    <th>Qui</th>
    <th>Sex</th>
    <th>Sáb</th>
  </tr>
  <tbody id="tableBody"></tbody>
  <tr>
    <td colspan=7>
    <p>
      <form id="dateChooser" name="dateChooser">
        <select name="chooseMonth" onChange="populateTable(this.form)">
          <option selected>Janeiro
          <option>Fevereiro
          <option>Março
          <option>Abril
          <option>Maio
          <option>Junho
          <option>Julho
          <option>Agosto
          <option>Setembro
          <option>Outubro
          <option>Novembro
          <option>Dezembro
        </select>
        <select name="chooseYear" onChange="populateTable(this.form)">
        </select>
      </form>
    </p>
    </td>
  </tr>
</table>

我想只使用CSS来圆化边框，我只是尝试使用border radius属性，但是我的表格没有改变边框

有人给我小费吗

提前谢谢

#calendarTable{

    border-radius:20px;
}

---

删除表上的border属性。浏览器仍然支持它，但它是。属性产生的效果可能不是您想要的

如果您希望表格中每个单元格周围都有边框，只需在CSS中指定，并在其中包含边框半径

即

如果您只想在整个表周围添加边框，请在表选择器上使用相同的css：

#calendarTable { border: solid 1px; border-radius: 4px; }

---

border radius

似乎对

table

和

td

元素都有效，无论

table

上是否有

border

属性

你必须有一些其他的CSS规则发挥作用

表格{
边框：1px纯蓝色；
边界半径：10px；
}
表td，表th{
边框：1px纯色灰色；
边界半径：10px；
填充物：5px；
}

表格标题。。。
表格单元格。。。
表格单元格。。。
表格单元格。。。
表格单元格。。。

这是一个应用了边界半径的简化表格。诀窍是设置单元格的左边框，而不是表格本身。它可以使用或不使用

thead

，我已经对

css

进行了注释，以显示我在做什么

/*
*首先，将一些属性正常化
*/
表td，
表th{
填充：.5rem；
文本对齐：左对齐；
垂直对齐：顶部；
}
/*
*添加边框、设置边框间距等
*左侧宽度为0，因此可以应用单元格边框而无需加倍。
*/
.有边框的桌子{
边框：1px纯银；
边框左宽度：0；
边界塌陷：分离；
边界间距：0；
边界半径：1em；
}
/*
*将边框添加到表格单元格/表头
*/
.表边td，
.带边框的桌子{
边框顶部：1件纯银；
左边框：1px纯银；
}
/*
*从第一个页眉/单元格中删除上边框
*/
.表格边框tbody:first child tr:first child td，
.表格边框THAD:first child tr:first child th{
边框顶部宽度：0；
}
/*
*设置第一个标题/单元格的边框半径
*/
.带边框的表格AD:first child tr:first child td:first child，
.带边框的表格ad:first child tr:first child th:first child{
边框左上半径：1rem；
}
/*
*设置最后一个页眉/单元格的边框半径
*/
.表格边框tbody:last child tr:last child td:first child，
.表格边框tbody:last child tr:last child th:first child{
边框左下半径：1rem；
}

标题
标题
标题
资料
资料
资料
资料
资料
资料
资料
资料
资料

正如其他人所说，这是应该提供您想要的外观的代码

代码

#可舍入{
边框：1px纯黑；
边界半径：10px；
}
#可舍入的td，#可舍入的th{
边框：1px纯色灰色；
边界半径：10px；
填充：3倍；
}

表格标题和其他标题单元格
表格单元格…更多数据。。。
表格单元格…更多数据。。。
表格单元格…更多数据。。。
表格单元格…更多数据。。。

请包含您的CSS。我的CSS不相关，我只是为我的文本和边框添加了颜色。当然相关。问题很可能在你的CSS中<代码>边框半径无法在

tr

上使用，请在

td

上尝试。我在CSS中看不到

边框半径

。您是要将其应用于整个表还是每个单元格？我这样问是因为我在你的CSS中没有看到

边框折叠

。我只是尝试了一下，我删除了边框属性并将这两个新属性添加到我的#calendarTable中，但仍然不起作用。。。边界不会改变，是的！这就是我想要的，谢谢。我会看看是否有其他CSS属性在这里做些什么..边界折叠是否是从引导设置为折叠的。这正是我的问题。由于我也在使用bootstrap，所以它有一个用于设置边框折叠的表的属性：所有表的折叠。。非常感谢。这应该是最好的答案。干得好：）

#calendarTable td { border: solid 1px; border-radius: 4px; }

#calendarTable { border: solid 1px; border-radius: 4px; }