Tables arrondies dans Twitter Bootstrap 3

Bootstrap 3 a laissé tomber des coins arrondis sur les tables. Quels styles dois-je appliquer pour les récupérer lorsque j’applique la classe à .table-bordered ?

METTRE À JOUR

Jusqu’à présent, je suis arrivé à ce code, sans effet.

CSS extrait de 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:

 
Config. Name API Calls Current Amount Actions
Agennda 2,876 $ 80.67 Edit

Si vous entourez la table avec un panneau, vous obtenez vos coins arrondis.

Comme ça:

 
....

“table-responsive” va sur un div qui enveloppe la table, pas sur la table elle-même.

Dans normalize.less, 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 effondrés: séparer. Vous devez créer une classe distincte et la configurer en conséquence.

  

Fonctionne uniquement avec “table-hover” et “table-ssortingped” PAS à table. 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 sujet , je suis arrivé avec ce CSS pour obtenir les coins arrondis dans des 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 fichiers source moins. Cependant, dans normalize.less, bootstrap 3.0RC ajoute:

 // ========================================================================== // Tables // ========================================================================== // // Remove most spacing between table cells. // table { border-collapse: collapse; border-spacing: 0; } 

Cette opération d’effondrement des frontières détruit les bordures arrondies des tables. Donc, en remplaçant simplement cela dans votre table-bordée, vous activez l’effet:

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

Je pense que ça peut marcher.

Par souci de réussite:

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

Le suivant fonctionne très bien pour moi:

 .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 sûr, cela ne fonctionne pas pour les tableaux nesteds.

Si vous n’avez qu’une cellule dans la première ligne ou la dernière ligne, celle-ci fonctionnera.

(Ajout d’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 concernant la mise en tableau de la table (

) semble fonctionner de manière optimale.

Cependant, comme mentionné dans les commentaires, vous devez supprimer la bordure supérieure de la table.

J’ai utilisé ce SCSS pour le faire, alors je pensais partager:

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

Ceci est une autre solution qui peut être beaucoup plus simple que les précédentes. Cela sélectionnera les premier et dernier éléments et appliquera une bordure à leurs coins respectifs. Vous pouvez ensuite append un rayon à la table globale.

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

Utilisez plutôt la table-bordée -courbée

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