Tableaux arrondis dans Twitter Bootstrap 3
Bootstrap 3 a perdu les coins arrondis sur les tables. Quels styles dois-je appliquer pour les récupérer quand j'applique la classe .table-bordered
, s'il vous plaît?
mise à JOUR
jusqu'à présent, je suis arrivé à ce code, sans effet.
CSS from 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;
}
code 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 réponses
si vous entourez la table d'un panneau vous obtenez vos coins arrondis.
comme ceci:
<div class="panel panel-default">
<table class="table table-bordered">
....
</table>
</div>
tableau "sensibles" va sur un div qui englobe à la table, pas sur la table elle-même.
dans normalize.moins il y a la table reset qui inclut border-collapse:collapse. Ce n'était pas dans le 2.x de Bootstrap. En raison de cette nouvelle réinitialisation, il n'y a pas de coins arrondis car ceux-ci doivent être bord-effondrement:séparé. Vous devez créer une classe séparée et la mettre en place en conséquence.
<table class="table table-curved">
ne fonctionne Qu'avec" table-hover " et "table-striped"" PAS de table bordée. Les bordures sont incluses dans ce style.
.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;
}
moins
// 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;
}
}
en utilisant la réponse de Christina et ce fil , je suis venu avec ce CSS pour obtenir les coins arrondis dans les tables avec ou sans 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;
}
je suppose que vous n'utilisez pas les moins-fichiers source. Cependant, en normaliser.moins, bootstrap 3.0 RC ajoute:
// ==========================================================================
// Tables
// ==========================================================================
//
// Remove most spacing between table cells.
//
table {
border-collapse: collapse;
border-spacing: 0;
}
ce truc de Frontière-effondrement détruit les frontières arrondies sur les tables. Ainsi, en remplaçant simplement que dans votre bordé de table vous allumez l'effet:
.table-bordered
{
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border-collapse: inherit;
}
je pense que ça peut marcher.
Pour l'amour de 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;
}
}
celui qui suit me va très bien:
.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;
}
bien qu'il ne fonctionne pas pour les tables emboîtées.
si vous n'avez qu'une case dans la première ou la dernière rangée, celle-ci fonctionnera.
(ajouté un correctif au code de: 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;
}
}
la réponse ci-dessus sur l'emballage de la table avec un panneau ( <div class="panel panel-default">
) semble fonctionner le mieux.
cependant, comme mentionné dans les commentaires, vous devez supprimer la bordure supérieure sur la table.
j'ai utilisé ce SCSS pour faire ceci, donc j'ai pensé que je partagerais:
// 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;
}
}
}
}
}
c'est une autre solution qui peut être beaucoup plus simple que les précédentes. Il sélectionnera les premier et dernier éléments th
et appliquera une bordure à leurs coins respectifs. Vous pouvez ensuite ajouter un rayon à l'ensemble de la table.
.table {
border-radius: 5px;
}
th:first-of-type {
border-top-left-radius: 5px;
}
th:last-of-type {
border-top-right-radius: 5px;
}
Utiliser table bordée de courbes au lieu de table bordée de
.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;
}