CSS Twitter Bootstrap 3 中的圆桌会议
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18729638/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Rounded tables in Twitter Bootstrap 3
提问by Phillippe Santana
Bootstrap 3 has dropped rounded corners on tables. Which styles should I apply to get them back when I apply the .table-borderedclass, please?
Bootstrap 3 在桌子上去掉了圆角。当我申请.table-bordered课程时，我应该申请哪些风格才能让他们回来？
UPDATE
更新
So far I've come to this code, with no effect.
到目前为止，我已经找到了这段代码，但没有任何效果。
CSS taken from Bootstrap 2.3.2:
取自 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 code:
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>
回答by Carsten Hess
If you surround the table with a panel you get your rounded corners.
如果你用面板围绕桌子，你会得到圆角。
Like this:
像这样：
<div class="panel panel-default">
<table class="table table-bordered">
....
</table>
</div>
回答by Christina
"table-responsive" goes on a div that wraps the table, not on the table itself.
“table-responsive”放在一个环绕桌子的 div 上，而不是在桌子上。
In normalize.less there is the table reset which include border-collapse:collapse. This was not in the 2.x of Bootstrap. Because of this new reset, there are no rounded corners as those have to be border-collapse:separate. You have to make a separate class and set it up accordingly.
在 normalize.less 中有表格重置，其中包括边框折叠：折叠。这不在 Bootstrap 的 2.x 中。由于这个新的重置，没有圆角，因为那些必须是 border-collapse:separate。您必须创建一个单独的类并进行相应的设置。
<table class="table table-curved">
Only works with "table-hover" and "table-striped" NOT table-bordered. The borders are included in this style.
仅适用于“table-hover”和“table-striped”而不是 table-bordered。边框包含在此样式中。
.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;
}
LESS
较少的
// 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;
}
}
回答by Alen Oblak
Using Christina's answer and this thread , i came up with this CSS to get the rounded corners in tables with or without THEAD.
使用 Christina 的回答和这个线程，我想出了这个 CSS 来获得带有或不带有 THEAD 的表格中的圆角。
.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;
}
回答by Joakim Poromaa Helger
I assume you are not using the source less-files. However, in normalize.less, bootstrap 3.0RC is adding:
我假设您没有使用源代码较少的文件。但是，在 normalize.less 中，bootstrap 3.0RC 添加了：
// ==========================================================================
// Tables
// ==========================================================================
//
// Remove most spacing between table cells.
//
table {
border-collapse: collapse;
border-spacing: 0;
}
This border-collapse thing destroys the rounded borders on tables. So, by simply override that in your table-bordered you turn on the effect:
这个边框折叠的东西会破坏桌子上的圆形边框。所以，通过简单地覆盖你的 table-bordered 你打开效果：
.table-bordered
{
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border-collapse: inherit;
}
I think it may work.
我认为它可能有效。
回答by Antti Haapala
The following one works quite nicely for me:
以下对我来说非常有效：
.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;
}
Though it does not of course work for nested tables.
虽然它当然不适用于嵌套表。
回答by Ruben Stolk
For the sake of bootstrappiness:
为了引导性：
.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;
}
}
回答by Mathias Dewelde
If you have only 1 cell in the first row or last row this one will work.
如果您在第一行或最后一行只有 1 个单元格，则该单元格将起作用。
(Added a fix to the code of: Ruben Stolk)
（添加了对以下代码的修复：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;
}
}
回答by asgeo1
The answer above on wrapping the table with a panel (<div class="panel panel-default">) seems to work the best.
上面关于用面板 ( <div class="panel panel-default">)包裹桌子的答案似乎效果最好。
However, as mentioned in the comments, you do need to remove the top border on the table.
但是，如评论中所述，您确实需要删除表格的顶部边框。
I used this SCSS to do this, so thought I would share:
我用这个 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;
}
}
}
}
}
回答by James Byrne
This is another solution that may be far simpler than the above ones. This will select the first and last thelements and apply a border to their respective corners. You can then add a radius to the overall table.
这是另一种可能比上述解决方案简单得多的解决方案。这将选择第一个和最后一个th元素，并在它们各自的角上应用边框。然后，您可以向整个表格添加半径。
.table {
border-radius: 5px;
}
th:first-of-type {
border-top-left-radius: 5px;
}
th:last-of-type {
border-top-right-radius: 5px;
}
回答by user1713785
Use table-bordered-curvedinstead table-bordered
使用table-bordered-curved代替table-bordered
.table-bordered-curved {
border-radius: 4px;
border-collapse: separate;
border: solid 1px #ccc;
}
.table-bordered-curved thead tr:last-child th,
.table-bordered-curved thead tr:last-child td {
border-bottom: solid 1px #ccc;
}
.table-bordered-curved thead tr th,
.table-bordered-curved thead tr td {
border-bottom: 0;
border-right: solid 1px #ccc;
}
.table-bordered-curved thead tr th:last-child,
.table-bordered-curved thead tr td:last-child {
border-right: 0;
}
.table-bordered-curved tbody tr:first-child th,
.table-bordered-curved tbody tr:first-child td {
border-top: 0;
}
.table-bordered-curved tbody tr td {
border-right: solid 1px #ccc;
}
.table-bordered-curved tbody tr td:last-child {
border-right: 0;
}
