[英]Rounded Edges via CSS to a Table
I'm working on an HTML/CSS email template and want to add border-radius of 3px to the outer table/container. 我正在研究HTML / CSS电子邮件模板,并希望将border-radius 3px添加到外部表/容器中。
Here is the page . 这是页面 。 I tried adding it as a style to table td {}
but it didn't work. 我尝试将它作为样式添加到table td {}
但它不起作用。 Is there another element I should target? 我应该针对另一个元素吗?
It's relatively easy using pseudo selectors. 使用伪选择器相对容易。
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;
}
This depends on a number of factors, namely: 这取决于许多因素,即:
However, generally, you can't style an individual table element like <tr>
or <td>
. 但是,通常,您不能设置单个表元素的样式,如<tr>
或<td>
。
What you can do is: 你能做的是:
table {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border-collapse: separate;
overflow: hidden;
}
For tables and other elements... 对于表格和其他元素......
Tables have to be treated as a whole. 表必须作为一个整体来对待。 But you can apply the above to <span>
, <div>
etc. 但您可以将上述内容应用于<span>
, <div>
等。
For IE (which, historically usually causes numerous CSS issues due to a lack of standardisation), you can use conditional CSS as an addition to your main CSS elements: 对于IE(由于缺乏标准化,历史上通常会导致许多CSS问题),您可以使用条件CSS作为主要CSS元素的补充:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie-css.css" />
<![endif]-->
If you want to do that with less code, you could just add "overflow hidden to the table element like so: 如果你想用更少的代码做到这一点,你可以添加“溢出隐藏到表元素,如下所示:
table{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border-collapse: separate;
overflow: hidden;
}
That way you wouldn't need all the pseudo-selectors 这样你就不需要所有的伪选择器了
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.