html - table Angular 上的边框半径不起作用

Question

我有一个电子邮件模板 here应用了 CSS 样式以使边缘变圆。

我希望左上角、右上角、左下角和右下角的外 Angular 是圆的。所有内部表格边缘/Angular 落都应该是方形的。

不过，您可以看到它也使内部边缘变圆:

标题:

页脚:

我应该如何修改我的 CSS 以仅使外部边缘/Angular 变圆？

table {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border-collapse: separate;
}
/* Top Left */
table tr:first-child th:first-child {
    -webkit-border-top-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    border-top-left-radius: 5px;
}
/* Top Right */
table tr:first-child th: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;
}

Answer 1

使用速记，所以，

对于页眉(#templateHeader)，

border-radius: 5px 5px 0 0; /*top-left top-right bottom-right bottom-left*/

对于页脚(#templateFooter)，

border-radius: 0 0 5px 5px;