通过 CSS 将圆角边缘到表格

Question

我正在开发一个HTML/CSS电子邮件模板，并希望将3px的边框半径添加到外部表/容器中。

这是页面。我尝试将其作为样式添加到table td {}但没有用。我应该针对其他元素吗？

Answer 1

使用伪选择器相对容易。

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

Answer 2

这取决于许多因素，即：

• 浏览器（FF，Chrome，IE等）
• 平台（电脑/台式机/移动等）
• CSS 级别

但是，通常，您不能像 <tr> 或 <td> 那样设置单个表元素的样式。

您可以做的是：

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

对于表格和其他元素...

必须将表视为一个整体。但是您可以将上述内容应用于<span>，<div>等。

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

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

Answer 3

如果你想用更少的代码来做到这一点，你可以像这样在表元素中添加"溢出隐藏"：

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

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