Arrondi des tables dans Twitter Bootstrap 3

Bootstrap 3 a chuté coins arrondis sur les tables. Les styles dois-je appliquer pour les récupérer quand je l'applique le .table-bordered classe, s'il vous plaît?

Mise à JOUR

Jusqu'à présent, je suis arrivé à ce code, n'ayant pas d'effet.

CSS prises 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:

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

InformationsquelleAutor Phillippe Santana | 2013-09-10

145

Si vous avez autour de la table avec un panneau vous obtenez vos angles arrondis.

Comme ceci:
```
<div class="panel panel-default">
    <table class="table table-bordered">
        ....
    </table>
</div>
```
- J'ai dû enlever de la cellule de la bordure supérieure de la première ligne, mais fonctionne parfaitement. Merci!
- ouais, qui fonctionne réellement et semble être sensible dans diff résolutions
- C'est cela la vraie réponse.
- sympa... ce devrait être la vraie réponse.
- j'adore ce genre d'accident!
- Cela fonctionne très bien pour moi avec Bootstrap 3.2.0!
- Le seul problème que j'ai trouvé avec cette solution est que la bordure de la table se rétrécit pour moins que la largeur de la table si la fenêtre est trop petite, résultant en partie de la table de ne pas être enfermé dans une bordure.
- .panneau n'avez pas de border-radius avec mon Bootstrap
- Les panneaux sont maintenant des cartes dans le bootstrap 4. Donc, il suffit de remplacer <div class="panel panel-default"> avec <div class="card">. Aussi, la création d'un autre div imbriqués sorrounding la table que le corps de carte va donner un aspect plus propre <div class="card-body">
- Comme pour Angulaires 4, cette solution ne fonctionne plus. Comme @MarceloVilla dit, l'utilisation de la carte à la place.
InformationsquelleAutor Carsten Hess

"table-responsive" va sur un div qui englobe à la table, pas sur la table elle-même.

À normaliser.moins il y a la table de réinitialisation incluent border-collapse:collapse. Ce n'était pas dans le 2.x Bootstrap. En raison de cette nouvelle reset, il n'y a pas de coins arrondis que ceux-ci doivent être border-collapse:séparée. Vous avez à faire dans une classe à part et de le configurer en conséquence.

       <table class="table table-curved">

Ne fonctionne qu'avec "la table de pointage" et "table-striped" PAS de table bordée. Les frontières sont inclus 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;
    }
}

Utile! J'ai besoin de configurer sans frontières de l'intérieur et qui semble délicat. Des idées sur ce point?
C'est la réponse parfaite! la forte réponse est non de travail si vous faites un zoom avant

InformationsquelleAutor Christina

À l'aide de Christina la réponse de ce fil , je suis venu avec ce CSS pour obtenir l'arrondi des coins de 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;
}

A bien fonctionné, sauf pour les tableaux à une seule colonne dans thead ou de pied de page. Si vous avez l'intention d'utiliser colspan="100%", vous aurez besoin d'inclure ces règles CSS: .table de courbes > :first-child > :first-child > :premier enfant:last-child { border-radius: 6px 6px 0 0; } .table de courbes > :dernier enfant > :dernier enfant > :premier enfant:last-child { border-radius: 0 0 6px 6px; }

InformationsquelleAutor Alen Oblak

Je suppose que vous n'êtes pas à l'aide de la source de moins de fichiers. Toutefois, dans les normaliser.moins, bootstrap 3.0 RC est d'ajouter:

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

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

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

Ce border-collapse chose détruit les bords arrondis sur les tables.
Donc, il suffit de la remplacer dans votre table bordée de vous activer l'effet:

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

    border-collapse: inherit;
}

Je pense que ça peut fonctionner.

InformationsquelleAutor Joakim Poromaa Helger

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

Si elle ne prend pas de cours pour les tables imbriquées.

InformationsquelleAutor Antti Haapala

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

InformationsquelleAutor Ruben Stolk

Si vous avez seulement 1 cellule de la première ligne ou la dernière ligne de ce travail.

(Ajout d'un correctif pour le 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;
}
}

InformationsquelleAutor Mathias Dewelde

0

La réponse ci-dessus de l'habillage de la table avec un panneau (<div class="panel panel-default">) semble fonctionner le mieux.

Cependant, comme mentionné dans les commentaires, vous avez besoin de supprimer la bordure du haut sur la table.

J'ai utilisé ce SCSS pour ce faire, de sorte pensé que je voudrais 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;
}
}
}
}
}
```
InformationsquelleAutor asgeo1
0

C'est une autre solution qui peut être beaucoup plus simple que celles mentionnées ci-dessus. Cela permet de sélectionner le premier et le dernier th éléments et appliquer 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;
}
```
InformationsquelleAutor James Byrne

Utilisation table bordée de courbes au lieu 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;
}

InformationsquelleAutor user1713785

Vous devez vous connecter pour publier un commentaire.