通过 CSS 到表格的圆角边缘答案

【问题标题】：Rounded Edges via CSS to a Table通过 CSS 到表格的圆角边缘
【发布时间】：2012-12-08 02:34:12
【问题描述】：

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

这里是the page。我尝试将其作为样式添加到table td {}，但它不起作用。还有其他我应该定位的元素吗？

【问题讨论】：

【解决方案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;
}

【讨论】：

谢谢！那工作得很好。为什么单独使用table 不起作用？
@TrentScott 我相信无论border-radius如何，表格单元格都会延伸到表格之外，因此您还必须将半径应用于四个角单元格。
这是有道理的。感谢您的帮助。

【解决方案2】：

这取决于许多因素，即：

浏览器（FF、Chrome、IE 等）
平台（PC/台式机/手机等）
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]-->

【讨论】：

【解决方案3】：

如果你想用更少的代码做到这一点，你可以像这样将“溢出隐藏到表格元素中：

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

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

【讨论】：