Html 通过CSS将圆角边添加到表格

我正在处理一个HTML/CSS电子邮件模板，希望在外部表格/容器中添加3px的边界半径

---

这是。我尝试将其作为一种样式添加到

表td{}

中，但没有成功。还有其他我应该瞄准的元素吗？

使用伪选择器相对容易

table{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border-collapse: separate;
}
/* Top Left */
table tr:first-child td:first-child{
    -webkit-border-top-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    border-top-left-radius: 5px;
}
/* Top Right */
table tr:first-child td:last-child{
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    border-top-right-radius: 5px;
}
/* Bottom Left */
table tr:last-child td:first-child{
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-left-radius: 5px;
}
/* Bottom Right */
table tr:last-child td:last-child{
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    border-bottom-right-radius: 5px;
}

---

这取决于许多因素，即：

• 浏览器（FF、Chrome、IE等）
• 平台（PC/台式机/移动设备等）
• CSS级别

但是，通常情况下，您不能设置单个表元素的样式，如

或

您可以做的是：

 table {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border-collapse: separate;
    overflow: hidden;
 }

对于表和其他元素

表必须作为一个整体来处理。但您可以将上述内容应用于

，

等

对于IE（通常由于缺乏标准化而导致大量CSS问题），您可以使用条件CSS作为主要CSS元素的补充：

<!--[if IE]>
  <link rel="stylesheet" type="text/css" href="ie-css.css" />
<![endif]-->

---

如果您想用更少的代码来实现这一点，您可以在table元素中添加“overflow hidden”，如下所示：

table{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border-collapse: separate;
    overflow: hidden;
}

---

这样你就不需要所有的伪选择器了

谢谢！这很好。为什么单独使用

表格

不起作用呢？@TrentScott我相信表格单元格会延伸到表格之外，而不管它的

边框半径

，所以你也必须将半径应用到四个角单元格上。这很有意义。感谢helP