web-dev-qa-db-fra.com

Tables arrondies sur 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, s'il vous plaît?

METTRE À JOUR

Jusqu'ici, 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:

<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>
css3twitter-bootstrap-3html-tablerounded-corners
53
Phillippe Santana

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

Comme ça:

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

"table-responsive" va sur une div qui enveloppe la table, pas sur la table elle-même. 

Dans normalize.less, la table est réinitialisée et inclut border-collapse: collapse. Ce n'était pas dans le 2.x de Bootstrap. En raison de cette nouvelle réinitialisation, il n’ya pas de coins arrondis car ceux-ci doivent être effondrés: séparés. Vous devez créer une classe séparée et la configurer en conséquence. 

       <table class="table table-curved">

Fonctionne uniquement avec "table-hover" et "table-striped" SANS 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;
    }
}
28
Christina

En utilisant la réponse de Christina et ce fil , j’ai imaginé ce CSS pour obtenir les angles arrondis dans les tableaux 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;
}
10
Alen Oblak

Je suppose que vous n'utilisez pas les fichiers source less. 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 de la bordure détruit les bordures arrondies des tableaux ... Donc, en annulant simplement le fait que dans votre bordure de table 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.

4
Joakim Poromaa Helger

Le suivant fonctionne assez 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 que cela ne fonctionne bien sûr pas pour les tables imbriquées.

2
Antti Haapala

Pour le plaisir de démarrer:

.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;
    }
}
1
Ruben Stolk

Si vous avez seulement 1 cellule dans la première 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;
  }
}
0
Mathias Dewelde

Utilisez table-bordée-courbée à la place table-bordé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;
}
0
user1713785

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

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

J'ai utilisé ce SCSS pour faire cela, alors j'ai pensé 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;
        }
      }
    }
  }
}
0
asgeo1

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 th et appliquera une bordure à leurs coins respectifs. Vous pouvez ensuite ajouter 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;
}
0
James Byrne