问题
Bootstrap 3 has dropped rounded corners on tables. Which styles should I apply to get them back when I apply the .table-bordered class, please?
UPDATE
So far I've come to this code, with no effect.
CSS taken from Bootstrap 2.3.2:
.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:
<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>
回答1:
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>
回答2:
"table-responsive" goes on a div that wraps the table, not on the table itself.
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.
<table class="table table-curved">
Only works with "table-hover" and "table-striped" NOT table-bordered. The borders are included in this style.
.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;
}
}
回答3:
Using Christina's answer and this thread , i came up with this CSS to get the rounded corners in tables with or without 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;
}
回答4:
I assume you are not using the source less-files. However, in normalize.less, bootstrap 3.0RC is adding:
// ==========================================================================
// 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
{
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border-collapse: inherit;
}
I think it may work.
回答5:
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.
回答6:
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;
}
}
回答7:
If you have only 1 cell in the first row or last row this one will work.
(Added a fix to the code of: 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;
}
}
回答8:
The answer above on wrapping the table with a panel (<div class="panel panel-default">) seems to work the best.
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:
// 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;
}
}
}
}
}
回答9:
This is another solution that may be far simpler than the above ones. This will select the first and last th elements and apply a border to their respective corners. You can then add a radius to the overall table.
.table {
border-radius: 5px;
}
th:first-of-type {
border-top-left-radius: 5px;
}
th:last-of-type {
border-top-right-radius: 5px;
}
回答10:
Use table-bordered-curved instead 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;
}
来源：https://stackoverflow.com/questions/18729638/rounded-tables-in-twitter-bootstrap-3