Tableau Bootstrap sans bande / bordures

Question

Je suis un peu coincé par un problème de CSS lorsque j'utilise Bootstrap. J'utilise également Angular JS avec Angular UI.bootstrap (ce qui pourrait faire partie du problème).

Je réalise un site web qui affiche des données dans un tableau. Parfois, les données contiennent des objets que je dois afficher dans des tableaux. Je veux donc mettre des tableaux sans bordure à l'intérieur d'un tableau normal tout en gardant des lignes de séparation à l'intérieur pour les tableaux sans bordure.

Mais il semble que même si je dis spécifiquement de ne pas montrer les bordures sur un tableau, cela est forcé :

HTML :

<table class='table borderless'>

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 c'est juste les bordures intérieures.

Answer 1

En utilisant Bootstrap 3.2.0, j'avais un problème avec la solution de Brett Henderson (les bordures étaient toujours là), donc je l'ai améliorée :

HTML

<table class="table table-borderless">

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

Answer 2

Le style de la bordure est défini dans l'élément td éléments.

html :

<table class='table borderless'>

css :

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

Mise à jour : Depuis Bootstrap 4.1, vous pouvez utiliser .table-borderless pour supprimer la bordure.

https://getbootstrap.com/docs/4.1/content/tables/#borderless-table

Answer 3

Similaire au reste, mais plus spécifique :

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

Answer 4

N'ajoutez pas le .table à votre <table> étiquette. D'après les documents de Bootstrap sur tableaux :

Pour un style de base - un léger rembourrage et uniquement des séparateurs horizontaux -ajouter la classe de base .table à tout <table> . Cela peut sembler super redondant, mais étant donné l'utilisation répandue des tableaux pour d'autres plugins comme les calendriers et les sélecteurs de date, nous avons choisi d'isoler nos styles de tableaux personnalisés.

Answer 5

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

<table class='table table-borderless'>