带有圆角和边框的表头答案

【问题标题】：Table header with rounded corners and border带有圆角和边框的表头
【发布时间】：2012-06-09 20:53:10
【问题描述】：

我表头可以有圆角和 1px 边框吗？

当我应用边框时，它不会应用于圆角，而是应用于实际的表格边框，因此边框角是方形的。

我该怎么做？

这是 CSS：

.example th {
border: 1px solid #ddd;
background: #444;
background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd));
background: -moz-linear-gradient(top,  #eee,  #ddd);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#eee', endColorstr='#ddd');
color: #444;
    }

圆角应用于 first 和 list child th： -moz-边界半径：6px 0 0 0； -webkit-border-radius：6px 0 0 0；边框半径：6px 0 0 0;

【问题讨论】：

我的解决方案是在我的单元格中添加 span 或 div。
请添加相关标记，可能它不适用于表格，或者您的标记有错误
如果对您有帮助，请不要忘记接受答案，作为对他人的基本礼貌......

标签： css border rounded-corners

【解决方案1】：

这使得所有表格标题（如果您使用语义 th 单元格而不是正文 td 单元格）具有圆角，但如果您希望它仅用于选定的表格 - 然后重命名类添加到table.rounded th，然后将rounded 类添加到这些表中：

th
{ 
-khtml-border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-ms-border-radius: 4px 4px 4px 4px;
-o-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
border: solid 1px black;
}

编辑：你需要有border-collapse: separate; 在你的桌子上才能做到这一点......

【讨论】：

这几乎就是我现在所拥有的，它正在创建方形边框角......
@user1438243 你的表格本身不能有任何边框，如果在计算样式中应用了这个，请检查浏览器开发者工具（也许有些东西会覆盖它）？ jsfiddle 是必须的……哦，你的浏览器真的支持圆桌吗？
@user1438243 检查编辑，这是推测的 - 但你可能错过了

【解决方案2】：

您可以尝试在每个 th 中添加一个 div 容器

例如：http://jsfiddle.net/y6VNe/5/

<table>
   <tr>
       <th><div>A</div></th>
       <th><div>B</div></th>
       <th><div>C</div></th>
       <th><div>D</div></th>
   </tr>
</table>

CSS

th div{
   border:1px solid black;
   width:80px;    
   text-align:center;
   border-radius: 10px;
}

【讨论】：

这可能行得通，我只是在寻找最直接、最不老套的方法。理想情况下不需要额外的 HTML。

【解决方案3】：

我知道这是一个旧线程，但是嗯。
您可以使用 box-shadow 来伪造边框。

box-shadow: 0px 0px 2px #ddd inset;

确实，颜色变亮存在一些问题，您必须进行补偿。

【讨论】：

【解决方案4】：

有一个用于应用圆角的 CSS3 属性，称为 border-radius

这是一个可以帮助你的链接：

http://www.yourhtmlsource.com/tables/roundedcorners.html

还有一个很好的解释：

http://davidwalsh.name/css-rounded-corners

【讨论】：

我已经在使用边框半径了。问题是虽然表格标题显示为圆角，但边框仍然是方形的。这是css：.example th {border：1px solid #ddd;背景：#444；背景：-webkit-gradient（线性，左上，左下，从（#eee），到（#ddd））；背景：-moz-线性渐变（顶部，#eee，#ddd）；过滤器：progid:DXImageTransform.Microsoft.gradient(startColorstr='#eee', endColorstr='#ddd');颜色：#444； }