Table#39;s border-radius does not function as expected(表的边框半径未按预期运行)
问题描述
我希望在整个表格周围添加边框半径。但以下代码无法在最新版本的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种不同的样式,则应该显示哪个边框。
这篇关于表的边框半径未按预期运行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:表的边框半径未按预期运行
基础教程推荐
- Karma-Jasmine:如何正确监视 Modal? 2022-01-01
- 有没有办法使用OpenLayers更改OpenStreetMap中某些要素 2022-09-06
- 悬停时滑动输入并停留几秒钟 2022-01-01
- 在 JS 中获取客户端时区(不是 GMT 偏移量) 2022-01-01
- 当用户滚动离开时如何暂停 youtube 嵌入 2022-01-01
- 角度Apollo设置WatchQuery结果为可用变量 2022-01-01
- 我什么时候应该在导入时使用方括号 2022-01-01
- 响应更改 div 大小保持纵横比 2022-01-01
- 在for循环中使用setTimeout 2022-01-01
- 动态更新多个选择框 2022-01-01