Jak zastosować promień obramowania do tabel Bootstrap 3? - html, css, twitter-bootstrap, twitter-bootstrap-3

Chcę, aby górne rogi i dolne rogi stołu miały zaokrąglone rogi.

Jak mogę to zrobić? W tej chwili stoły Bootstrap 3 mają promień 0.

Odpowiedzi:

Spróbuj tego :-

<table class="table table-curved">
....
</table>

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

Najłatwiej jest owinąć stół panelem. Wtedy twój stół będzie automatycznie zaokrąglony.

Przykład:

<div class="panel panel-default">
<table class="table table-striped">
....
</table>
</div>

Uwaga: panel-default doda szarą ramkę 1px. jeśli chcesz go ukryć, dodaj kolor obramowania: biały; do stylu domyślnego panelu.