Twitter Bootstrap中的圆桌

Bootstrap 3已经在桌子上掉落了圆angular。 请问我应用哪种types的应用程序,以便在我应用.table-bordered类时将它们还原?

UPDATE

到目前为止,我已经来到这个代码,没有任何效果。

从Bootstrap 2.3.2获取的CSS:

 .table-bordered { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .table-bordered thead:first-child tr:first-child > th:first-child, .table-bordered tbody:first-child tr:first-child > td:first-child, .table-bordered tbody:first-child tr:first-child > th:first-child { -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -moz-border-radius-topleft: 4px; } .table-bordered thead:last-child tr:last-child > th:first-child, .table-bordered tbody:last-child tr:last-child > td:first-child, .table-bordered tbody:last-child tr:last-child > th:first-child, .table-bordered tfoot:last-child tr:last-child > td:first-child, .table-bordered tfoot:last-child tr:last-child > th:first-child { -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; -moz-border-radius-bottomleft: 4px; } 

HTML代码:

 <table class="table table-hover table-responsive table-bordered"> <thead> <tr> <th style="width: 50%"> Config. Name </th> <th> API Calls </th> <th> Current Amount </th> <th> Actions </th> </tr> </thead> <tbody> <tr> <td> <a href="/searchsources/details">Agennda</a> </td> <td> 2,876 </td> <td> $ 80.67 </td> <td> <a href="/searchsources/details">Edit</a> </td> </tr> </tbody> </table> 

如果你用面板包围桌子,你会得到你的圆angular。

喜欢这个:

 <div class="panel panel-default"> <table class="table table-bordered"> .... </table> </div> 

“桌面响应”是一个包装桌子的div,而不是桌子本身。

在normalize.less中有包含边界崩溃的表重置:崩溃。 这不是Bootstrap的2.x版本。 由于这个新的重置,没有圆angular,因为那些必须是边界崩溃:分开。 你必须做一个单独的课程,并相应地进行设置。

  <table class="table table-curved"> 

只适用于“table-hover”和“table-striped”不是表格边界。 这种风格包含边界。

 .table-curved { border-collapse: separate; } .table-curved { border: solid #ccc 1px; border-radius: 6px; border-left:0px; } .table-curved td, .table-curved th { border-left: 1px solid #ccc; border-top: 1px solid #ccc; } .table-curved th { border-top: none; } .table-curved th:first-child { border-radius: 6px 0 0 0; } .table-curved th:last-child { border-radius: 0 6px 0 0; } .table-curved th:only-child{ border-radius: 6px 6px 0 0; } .table-curved tr:last-child td:first-child { border-radius: 0 0 0 6px; } .table-curved tr:last-child td:last-child { border-radius: 0 0 6px 0; } 

  // Added Rounded Corner Tables .table-curved { border-collapse: separate; border: solid @table-border-color 1px; border-radius: @table-radius; border-left:0px; td, th { border-left: 1px solid @table-border-color; border-top: 1px solid @table-border-color; } th { border-top: none; } th:first-child { border-radius: @table-radius 0 0 0; } th:last-child { border-radius: 0 @table-radius 0 0; } th:only-child{ border-radius: @table-radius @table-radius 0 0; } tr:last-child td:first-child { border-radius: 0 0 0 @table-radius; } tr:last-child td:last-child { border-radius: 0 0 @table-radius 0; } } 

使用克里斯蒂娜的答案和这个线程 ,我想出了这个CSS来获得有或没有THEAD的表中的圆angular。

 .table-curved { border-collapse: separate; border: solid #ccc 1px; border-radius: 6px; border-left: 0px; border-top: 0px; } .table-curved > thead:first-child > tr:first-child > th { border-bottom: 0px; border-top: solid #ccc 1px; } .table-curved td, .table-curved th { border-left: 1px solid #ccc; border-top: 1px solid #ccc; } .table-curved > :first-child > :first-child > :first-child { border-radius: 6px 0 0 0; } .table-curved > :first-child > :first-child > :last-child { border-radius: 0 6px 0 0; } .table-curved > :last-child > :last-child > :first-child { border-radius: 0 0 0 6px; } .table-curved > :last-child > :last-child > :last-child { border-radius: 0 0 6px 0; } 

我假设你没有使用源文件较less的文件。 但是,在normalize.less,bootstrap 3.0RC添加:

 // ========================================================================== // Tables // ========================================================================== // // Remove most spacing between table cells. // table { border-collapse: collapse; border-spacing: 0; } 

这个边界崩溃的东西破坏了表格上的圆形边框。 所以,通过简单地覆盖在你的表格边界,你打开效果:

 .table-bordered { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border-collapse: inherit; } 

我认为这可能会奏效。

为了引导:

 .table-curved { border-collapse: separate; border: solid @table-border-color 1px; border-radius: @border-radius-base; border-left: 0px; border-top: 0px; > thead:first-child > tr:first-child > th { border-bottom: 0px; border-top: solid @table-border-color 1px; } td, th { border-left: 1px solid @table-border-color; border-top: 1px solid @table-border-color; } > :first-child > :first-child > :first-child { border-radius: @border-radius-base 0 0 0; } > :first-child > :first-child > :last-child { border-radius: 0 @border-radius-base 0 0; } > :last-child > :last-child > :first-child { border-radius: 0 0 0 @border-radius-base; } > :last-child > :last-child > :last-child { border-radius: 0 0 @border-radius-base 0; } } 

下面的一个很适合我:

 .table-curved { border-collapse: separate; } .table-curved { border: solid #ccc 1px; border-radius: 6px; } .table-curved td, .table-curved th { border-left: 1px solid #ccc; border-top: 1px solid #ccc; } .table-curved tr > *:first-child { border-left: 0px; } .table-curved tr:first-child > * { border-top: 0px; } 

虽然它当然不适用于嵌套表格。

如果你在第一行或最后一行只有一个单元格,这个工作。

(为Ruben Stolk的代码添加了一个修正)

 .table-curved { border-collapse: separate; border: solid @table-border-color 1px; border-radius: @border-radius-base; border-left: 0px; border-top: 0px; > thead:first-child > tr:first-child > th { border-bottom: 0px; border-top: solid @table-border-color 1px; } td, th { border-left: 1px solid @table-border-color; border-top: 1px solid @table-border-color; } > :first-child > :first-child > :first-child { border-radius: @border-radius-base 0 0 0; } > :first-child > :first-child > :last-child { border-radius: 0 @border-radius-base 0 0; } > :first-child > :first-child > :only-child{ border-radius: @border-radius-base @border-radius-base 0 0; } > :last-child > :last-child > :first-child { border-radius: 0 0 0 @border-radius-base; } > :last-child > :last-child > :last-child { border-radius: 0 0 @border-radius-base 0; } > :last-child > :last-child > :only-child{ border-radius: 0 0 @border-radius-base @border-radius-base; } } 

上面用面板( <div class="panel panel-default"> )包装表格的答案似乎最好。

但是,如评论中所述,您需要删除表格上的顶部边框。

我用这个SCSS来做到这一点,所以我想分享一下:

 // remove extra top border on tables wrapped in a panel .panel { & > .table-responsive > .table.table-bordered, & > .table.table-bordered { & > tbody:first-child, & > thead:first-child { & > tr:first-child { td, th { border-top: none; } } } } } 

这是另一个解决scheme,可能比以上更简单。 这将select第一个和最后一个元素,并将边框应用于各自的angular落。 然后可以在整个表中添加一个半径。

 .table { border-radius: 5px; } th:first-of-type { border-top-left-radius: 5px; } th:last-of-type { border-top-right-radius: 5px; }