Table bootstrap sans bande / bordures

Je suis un peu coincé avec un problème CSS en utilisant Bootstrap. J’utilise également Angular JS avec Angular UI.bootstrap (ce qui pourrait faire partie du problème).

Je crée un site Web qui affiche des données dans un tableau. Parfois, les données contiennent un object que je dois afficher dans les tables. Je souhaite donc placer des tables sans bordure dans une table normale tout en conservant les lignes de séparation des tables sans bordure.

Mais il semble que même si je dis spécifiquement de ne pas montrer les frontières sur une table, elle est forcée:

HTML:

CSS:

 .borderless table { border-top-style: none; border-left-style: none; border-right-style: none; border-bottom-style: none; } 

Donc, ici, ce que je veux, ce sont les frontières intérieures.

Le style de bordure est défini sur les éléments td .

html:

 

css:

 .borderless td, .borderless th { border: none; } 

En utilisant Bootstrap 3.2.0, j’ai eu un problème avec la solution Brett Henderson (les bordures étaient toujours là), alors je l’ai amélioré:

HTML

 

CSS

 .table-borderless > tbody > tr > td, .table-borderless > tbody > tr > th, .table-borderless > tfoot > tr > td, .table-borderless > tfoot > tr > th, .table-borderless > thead > tr > td, .table-borderless > thead > tr > th { border: none; } 

similaire au rest, mais plus spécifique:

  table.borderless td,table.borderless th{ border: none !important; } 

.table pas la classe .table à votre

. À partir des documents Bootstrap sur les tables :

Pour un style de base – un remplissage léger et uniquement des séparations horizontales – insérez la classe de base .table dans n’importe quelle

. Cela peut sembler super redondant, mais étant donné l’utilisation répandue des tables pour d’autres plug-ins comme les calendriers et les sélecteurs de dates, nous avons opté pour l’isolement de nos styles de tableaux personnalisés.

Depuis Bootstrap v4.1, vous pouvez append la table-borderless à votre table, voir la documentation officielle :

 

Dans mon CSS:

 .borderless tr td { border: none !important; padding: 0px !important; } 

Dans ma directive:

 

Je n’ai pas mis le ‘sans frontières’ pour l’élément td.

Testé et ça a marché! Toutes les bordures et les rembourrages sont complètement dépouillés.

Essaye ça:

 

CSS

 .borderless { border:none; } 

Remarque: Ce que vous faisiez avant ne fonctionnait pas car votre code css visait une table dans votre table .borderless (qui n’existait probablement pas)

J’ai développé les styles de table Bootstrap comme Davide Pastore, mais avec cette méthode, les styles sont également appliqués à toutes les tables enfants et ne s’appliquent pas au pied de page.

Une meilleure solution consisterait à imiter les principaux styles de table Bootstrap, mais avec votre nouvelle classe:

 .table-borderless>thead>tr>th .table-borderless>thead>tr>td .table-borderless>tbody>tr>th .table-borderless>tbody>tr>td .table-borderless>tfoot>tr>th .table-borderless>tfoot>tr>td { border: none; } 

Ensuite, lorsque vous utilisez

seule la table spécifique avec la classe sera bordée, pas n’importe quelle table dans l’arborescence.

Je sais que c’est un vieux sujet et que vous avez choisi une réponse, mais j’ai pensé que je posterais ceci car il est pertinent pour quiconque est actuellement à la recherche.

Il n’y a aucune raison de créer de nouvelles règles CSS, annulez simplement les règles actuelles et les frontières disparaîtront.


     .table> tbody> tr> th,
     .table> tbody> tr> td {
         border-top: 0;
     }

aller de l’avant, tout avec style

     .table

ne montrera aucune frontière.

Je suis en retard sur le jeu ici, mais FWIW: l’ajout de .table-bordered à une .table ne fait .table une .table à la table, mais en ajoutant une bordure complète à chaque cellule.

Mais la suppression de .table-bordered laisse toujours les lignes de la règle. C’est un problème sémantique, mais conformément à la nomenclature BS3 +, j’ai utilisé cet ensemble de modifications:

 .table.table-unruled>tbody>tr>td, .table.table-unruled>tbody>tr>th { border-top: 0 none transparent; border-bottom: 0 none transparent; } 
    
.table
a b c
a b c
a b c
a b c
.table .table-bordered
a b c
a b c
a b c
a b c
.table .table-unruled
a b c
a b c
a b c
a b c
.table .table-bordered .table-unruled
a b c
a b c
a b c
a b c

Utiliser hidden au lieu de none :

 .hide-bottom { border-bottom-style: hidden; } 

Utilisez la classe border de Boostrap 4

  

ou

 

Veillez à terminer la saisie de la classe avec le dernier changement que vous souhaitez effectuer.

Celui-ci a fonctionné pour moi.

 ; 

La clé est que vous devez append border-top au