3

表头可以有圆角和 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-border-radius: 6px 0 0 0; -webkit-border-radius：6px 0 0 0；边框半径：6px 0 0 0；

4

4 回答 4

4

这使得所有表格标题（如果您使用语义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;在你的桌子上才能做到这一点......

于 2012-06-05T20:11:18.277 回答
0

您可以尝试在每个 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;
}​
于 2012-06-05T20:10:57.763 回答
0

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

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

Admiddetly，颜色更亮存在一些问题，您必须进行补偿。

于 2013-04-05T07:46:17.487 回答
-3

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

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

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

这是另一个很好的解释：

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

于 2012-06-05T20:09:54.113 回答