表的边界半径不起作用

我想在整个格中添加一个边框半径。 但是下面的代码在最新版本的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

4 Solutions collect form web for “表的边界半径不起作用”

它的工作原理,这是所使用的工具的一个问题:由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: noneborder-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; } 
  • 是否可以指定一个有序列表的起始号码?
  • 什么是在C#中parsingHTML的最佳方法?
  • 在vim中的HTML标签之间删除文本?
  • AngularJS指令限制A和E
  • 忽略父级填充
  • 如何在HTML中显示反向sorting列表?
  • 是否有Unicode字形符号代表“search”
  • 什么是DOM级别?
  • Web上的字体
  • 是否可以隐藏使用CSS或Javascript的网页的光标?
  • Bootstrap 3在每个项目中具有不同高度的网格 - 是否仅使用CSS解决?