表的边框半径未按预期运行
我希望在整个表格周围添加边框半径。但以下代码无法在最新版本的Firefox和Google Chrome中运行。
table {
border-spacing: 0;
width: 600px;
margin: 30px;
border: 1px solid #CCCCCC;
border-radius: 6px 6px 6px 6px;
-moz-border-radius: 6px 6px 6px 6px;
-webkit-border-radius: 6px 6px 6px 6px;
box-shadow: 0 1px 1px #CCCCCC;
}
table th:first-child {
border-radius: 6px 0 0 0;
-moz-border-radius: 6px 0 0 0;
-webkit-border-radius: 6px 0 0 0;
}
table th:last-child {
border-radius: 0 6px 0 0;
-moz-border-radius: 0 6px 0 0;
-webkit-border-radius: 0 6px 0 0;
}
table td:first-child,
.bordered th:first-child {
border-left: medium none;
}
table th {
background-color: #DCE9F9;
background-image: -moz-linear-gradient(center top, #F8F8F8, #ECECEC);
background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#F8F8F8), to(#ECECEC), color-stop(.4, #F8F8F8));
border-top: medium none;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
table td,
table th {
border-left: 1px solid #CCCCCC;
border-top: 1px solid #CCCCCC;
padding: 10px;
text-align: left;
}
<table class="bordered">
<thead>
<tr>
<th><label>Labels</label></th>
<th><label>Labels</label></th>
<th><label>Labels</label></th>
<th><label>Labels</label></th>
<th><label>Labels</label></th>
</tr>
</thead>
<tbody>
<tr>
<td><label>Value</label></td>
<td><label>Value</label></td>
<td><label>Value</label></td>
<td><label>Value</label></td>
<td><label>Value</label></td>
</tr>
</tbody>
</table>
JSFiddle
解决方案
它可以工作,这是所用工具的问题:jsF标准化的css通过隐藏浏览器的默认设置而导致问题.
请参见http://jsfiddle.net/XvdX9/5/
编辑:
normalize.cssjsFdle中的样式表将指令border-collapse: collapse
添加到所有表,它在CSS2.1中以完全不同的方式呈现它们:
- The separated borders model
- The collapsing border model
在另一个小提琴中可以看到这两个模型的不同:http://jsfiddle.net/XvdX9/11/(单元格上有一些透明的,左上角有一个巨大的边框半径,以查看表格与其单元格之间发生了什么)
在同一个关于HTML表格的CSS2.1页面中,还解释了浏览器应该/可以如何处理分隔边框模型中的空单元格、折叠边框模型中border-style: none
和border-style: hidden
之间的区别、如何计算宽度,以及如果表、行和单元格元素在同一边框上定义了3种不同的样式,则应该显示哪个边框。
相关文章