Округленные таблицы в Twitter Bootstrap 3
Bootstrap 3 сбросил закругленные углы на столах. Какие стили я должен применить, чтобы получить их обратно, когда я применяю .table-bordered
класс, пожалуйста?
обновление
до сих пор я этот код, без эффекта.
CSS взяты из 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-код:
<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>
10 ответов
Если вы окружаете стол панелью, вы получаете закругленные углы.
такой:
<div class="panel panel-default">
<table class="table table-bordered">
....
</table>
</div>
"table-responsive" идет на div, который обертывает стол, а не на самом столе.
в нормализации.меньше есть сброс таблицы, которые включают border-collapse: collapse. Этого не было во 2.x Бутстрэпа. Из-за этого нового сброса нет закругленных углов, поскольку они должны быть border-collapse:separate. Вы должны создать отдельный класс и настроить его соответствующим образом.
<table class="table table-curved">
работает только с "table-hover" и "table-striped" не граничит с таблицей. Этот границы включены в этот стиль.
.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;
}
меньше
// 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;
}
}
используя ответ Кристины и это нить , Я придумал этот CSS, чтобы получить закругленные углы в таблицах с или без 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;
}
Я предполагаю, что вы не используете исходные less-файлы. Впрочем, в норме.меньше, bootstrap 3.0 RC добавляет:
// ==========================================================================
// Tables
// ==========================================================================
//
// Remove most spacing between table cells.
//
table {
border-collapse: collapse;
border-spacing: 0;
}
эта вещь краха границы разрушает закругленные границы на таблицах. Таким образом, просто переопределить, что в вашей таблице граничит вы включите эффект:
.table-bordered
{
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border-collapse: inherit;
}
Я думаю, что это может сработать.
ради 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;
}
}
следующий работает довольно хорошо для меня:
.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;
}
хотя это, конечно, не работает для вложенных таблиц.
Если у вас есть только 1 ячейка в первой строке или последней строке, это будет работать.
(добавлено исправление в код: 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;
}
}
ответ выше на обертывание стола панелью (<div class="panel panel-default">
), Кажется, работает лучше.
однако, как упоминалось в комментариях, вам нужно удалить верхнюю границу таблицы.
я использовал этот SCSS для этого, поэтому подумал, что поделюсь:
// 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;
}
}
}
}
}
Это еще одно решение, которое может быть намного проще, чем вышеуказанные. Это позволит выбрать первый и последний th
элементы и применить границу к их соответствующим углам. Затем можно добавить радиус в общую таблицу.
.table {
border-radius: 5px;
}
th:first-of-type {
border-top-left-radius: 5px;
}
th:last-of-type {
border-top-right-radius: 5px;
}
использовать стол-купе-изогнутый вместо таблица-граничит
.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;
}