表的边界半径不起作用

我想在整个格中添加一个边框半径。 但是下面的代码在最新版本的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; } 
  • 使用PHP将HTML + CSS转换为PDF?
  • 如何从jQuery的父级select所有的孩子(在任何级别)?
  • 如何检测DIV的维度变化?
  • 在HTML表格中换行
  • 显示设置为表格单元的元素的Colspan / Rowspan
  • 如何从HTML中的链接中删除下划线?
  • GitHub页面和相对path
  • 带有两个提交button和两个“目标”属性的HTML表单
  • 组织Javascript库和CSS文件夹结构的最佳实践
  • 从页面禁用浏览器打印选项(页眉,页脚,边距)?
  • 一个命令行的HTML漂亮的打印机:使凌乱的HTML可读