Zaokrąglone stoły na Twitterze Bootstrap 3

Question

Bootstrap 3 opuścił zaokrąglone rogi na stołach. Jakie style należy zastosować, aby odzyskać je po zastosowaniu klasy .table-bordered?

UPDATE

Dotychczas Doszedłem do tego kodu, bez skutku.

CSS zaczerpnięte 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; 
} 

HTML kod:

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

Answer 1

Jeśli otoczysz stół panelem, uzyskasz zaokrąglone rogi.

Jak to:

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

Answer 2

"table-reagujący" idzie na div, które owija się stół, a nie na samej tabeli.

W normalize.less jest reset tabeli, który obejmuje obramowanie obramowania: zwiń. To nie było w 2.x Bootstrapa. Z powodu tego nowego resetowania, nie ma zaokrąglonych rogów, ponieważ te muszą być zawalone na granicy: oddzielić. Musisz stworzyć osobną klasę i odpowiednio ją ustawić.

 <table class="table table-curved"> 

Działa tylko z "hover-table" i "table-striped" NOT-bordered. Granice są zawarte w tym stylu.

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

MNIEJ

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

Answer 3

Korzystanie odpowiedź Christiny i ten thread, wymyśliłem tego CSS aby uzyskać zaokrąglone narożniki w tabelach z lub bez 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; 
} 

Answer 4

Zakładam, że nie korzystasz ze źródła less-files. Jednak w normalize.less, bootstrap 3.0RC dodaje:

// ========================================================================== 
// Tables 
// ========================================================================== 

// 
// Remove most spacing between table cells. 
// 

table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 

Ten border-collapse rzecz niszczy zaokrąglone granice na stołach. Więc po prostu zastąpić że w tabeli-graniczy włączeniu efektu:

.table-bordered 
{ 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 

    border-collapse: inherit; 
} 

myślę, że może pracować.

Answer 5

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

Answer 6

Jeśli masz tylko 1 komórkę w pierwszym rzędzie lub ostatnim wierszu ten będzie działać.

(Dodano poprawkę do kodeksu: 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; 
    } 
} 

Answer 7

Odpowiedź na powyższe owijania tabelę z panelem (<div class="panel panel-default">) wydaje się działać najlepiej.

Jednak, jak wspomniano w komentarzach, trzeba usunąć górną krawędź na stole.

użyłem tego SCSS to zrobić, więc pomyślałem, że podzielę:

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

Answer 8

Poniżej jeden działa całkiem dobrze dla mnie:

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

Choć oczywiście nie działa dla zagnieżdżonych tabele.

Answer 9

To kolejne rozwiązanie, które może być znacznie prostsze niż powyższe. Spowoduje to wybranie pierwszego i ostatniego elementu th i zastosowanie obramowania do odpowiednich narożników. Następnie możesz dodać promień do całej tabeli.

.table { 
    border-radius: 5px; 
} 
th:first-of-type { 
    border-top-left-radius: 5px; 
} 
th:last-of-type { 
    border-top-right-radius: 5px; 
} 

Answer 10

Zastosowanie tabeli graniczy zakrzywiona zamiast tabeli graniczy

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