Zaokrąglone tabele w Twitter Bootstrap 3
Bootstrap 3 upuścił zaokrąglone rogi na stołach. Które style należy zastosować, aby je odzyskać, gdy zastosuję.table-bordered
klasa, proszę?
AKTUALIZACJA
Do tej pory dotarłem do tego kodu, bez skutku.
CSS zaczerpnięty z 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;
}
Kod 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>