Rounded tables in Twitter Bootstrap 3

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>

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>

Christina

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

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.

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

Joakim Poromaa Helger

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.

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.

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

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

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

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

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

标签

css3

twitter-bootstrap-3

html-table

rounded-corners