Question

我表头可能有圆角和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;
    }

圆角应用于第一个并列出子项： -moz-border-radius：6px 0 0 0; -webkit-border-radius：6px 0 0 0; border-radius：6px 0 0 0;

Answer 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;才能实现此目标......

Answer 2

您是否可以尝试在每个

中添加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;
}

Answer 3

我意识到这是一个旧线程，但是呃。你可以使用盒子阴影来伪造边框。

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

很明显，有些问题颜色更明亮，你必须补偿。

Answer 4

有一个CSS3属性用于应用名为 border-radius

的圆角

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

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

这是另一个有一个很好的解释：

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

带有圆角和边框的表头

4 个答案: