Rounded tables in Twitter Bootstrap 3

Question

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?

Answer 1

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.