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; }
