表的边界半径不起作用
我想在整个表格中添加一个边框半径。 但是下面的代码在最新版本的Firefox和Google Chrome中都不起作用。
HTML
<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> CSS
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; }
的jsfiddle
它的工作原理，这是所使用的工具的一个问题：由jsFiddle 标准化的CSS通过隐藏你的默认浏览器造成的问题…
见http://jsfiddle.net/XvdX9/5/
编辑：
从jsFiddle的normalize.css样式表添加指令border-collapse: collapse到所有的表，它在CSS2.1中完全不同的呈现：
- 分离的边界模型
- 崩溃的边界模型
这两个模型之间的差异可以在这个其他的小提琴中看到： http : //jsfiddle.net/XvdX9/11/ （在单元格上有一些透明胶片，在左上angular有一个巨大的边框半径，为了看看会发生什么在桌上vs其细胞）
在关于HTML表格的相同的CSS2.1页面中，也有关于什么浏览器应该/可以对分离的边界模型中的空单元格进行解释， border-style: none和border-style: hidden之间的区别border-style: hidden在塌陷边界中模型，宽度是如何计算的，以及如果表格，行和单元格元素在同一个边框上定义了3种不同的样式，应该显示哪个边框。
border-collapse: separate !important; 工作。
谢谢。
HTML
<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>
CSS
table { border-collapse: separate !important; border-spacing: 0; width: 600px; margin: 30px; } .bordered { border: solid #ccc 1px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 1px 1px #ccc; -moz-box-shadow: 0 1px 1px #ccc; box-shadow: 0 1px 1px #ccc; } .bordered tr:hover { background: #ECECEC; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; } .bordered td, .bordered th { border-left: 1px solid #ccc; border-top: 1px solid #ccc; padding: 10px; text-align: left; } .bordered th { background-color: #ECECEC; background-image: -webkit-gradient(linear, left top, left bottom, from(#F8F8F8), to(#ECECEC)); background-image: -webkit-linear-gradient(top, #F8F8F8, #ECECEC); background-image: -moz-linear-gradient(top, #F8F8F8, #ECECEC); background-image: linear-gradient(top, #F8F8F8, #ECECEC); -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset; box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; border-top: none; text-shadow: 0 1px 0 rgba(255,255,255,.5); } .bordered td:first-child, .bordered th:first-child { border-left: none; } .bordered th:first-child { -moz-border-radius: 6px 0 0 0; -webkit-border-radius: 6px 0 0 0; border-radius: 6px 0 0 0; } .bordered th:last-child { -moz-border-radius: 0 6px 0 0; -webkit-border-radius: 0 6px 0 0; border-radius: 0 6px 0 0; } .bordered th:only-child{ -moz-border-radius: 6px 6px 0 0; -webkit-border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0; } .bordered tr:last-child td:first-child { -moz-border-radius: 0 0 0 6px; -webkit-border-radius: 0 0 0 6px; border-radius: 0 0 0 6px; } .bordered tr:last-child td:last-child { -moz-border-radius: 0 0 6px 0; -webkit-border-radius: 0 0 6px 0; border-radius: 0 0 6px 0; }
的jsfiddle
对这个老问题的一个注释：
我的reset.css已经设置border-spacing: 0 ，导致angular落被切断。 我必须将其设置为3px才能正常工作（值将取决于所讨论的半径）。
<div class="leads-search-table"> <div class="row col-md-6 col-md-offset-2 custyle"> <table class="table custab bordered"> <thead> <tr> <th>ID</th> <th>Title</th> <th>Parent ID</th> <th class="text-center">Action</th> </tr> </thead> <tr> <td>1</td> <td>News</td> <td>News Cate</td> <td class="text-center"><a class='btn btn-info btn-xs' href="#"><span class="glyphicon glyphicon-edit"></span> Edit</a> <a href="#" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span> Del</a></td> </tr> <tr> <td>2</td> <td>Products</td> <td>Main Products</td> <td class="text-center"><a class='btn btn-info btn-xs' href="#"><span class="glyphicon glyphicon-edit"></span> Edit</a> <a href="#" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span> Del</a></td> </tr> <tr> <td>3</td> <td>Blogs</td> <td>Parent Blogs</td> <td class="text-center"><a class='btn btn-info btn-xs' href="#"><span class="glyphicon glyphicon-edit"></span> Edit</a> <a href="#" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span> Del</a></td> </tr> </table> </div> </div>
CSS
.custab{ border: 1px solid #ccc; margin: 5% 0; transition: 0.5s; background-color: #fff; -webkit-border-radius:4px; border-radius: 4px; border-collapse: separate; }
