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

Installer bootstrap soit avec le lien npm ou cdn

<table class="table table-borderless">
<thead>
<tr>
  <th scope="col">#</th>
  <th scope="col">First</th>
  <th scope="col">Last</th>
  <th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
  <th scope="row">1</th>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
</tr>
<tr>
  <th scope="row">2</th>
  <td>Jacob</td>
  <td>Thornton</td>
  <td>@fat</td>
  </tr>
  <tr>
  <th scope="row">3</th>
    <td colspan="2">Larry the Bird</td>
    <td>@twitter</td>
   </tr>
 </tbody>
</table>

obtenir la référence avec ceci lien

Answer 2

Dans mon CSS :

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

Dans ma directive :

<table class='table borderless'>
    <tr class='borderless' ....>

Je n'ai pas mis le "borderless" pour l'élément td.

Testé et ça a marché ! Toutes les bordures et tous les rembourrages ont été complètement supprimés.

Answer 3

J'ai étendu les styles de table Bootstrap comme Davide Pastore l'a fait, mais avec cette méthode, les styles sont également appliqués à toutes les tables enfant, et ils ne s'appliquent pas au pied de page.

Une meilleure solution serait d'imiter les styles de table de 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 <table class='table table-borderless'> seule la table spécifique avec la classe sera bordée, pas n'importe quelle table dans l'arbre.

Answer 4

Essayez ça :

<table class='borderless'>

CSS

.borderless {
 border:none;
}

Note : Ce que vous faisiez avant ne fonctionnait pas parce que votre code css ciblait un tableau dans votre tableau .borderless (qui n'existait probablement pas).

Answer 5

Je sais qu'il s'agit d'un vieux fil de discussion et que vous avez déjà trouvé une réponse, mais j'ai pensé que je devais le poster car il est pertinent pour toute autre personne qui cherche actuellement.

Il n'y a aucune raison de créer de nouvelles règles CSS, il suffit d'annuler les règles actuelles et les bordures disparaîtront.

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

à l'avenir, tout ce qui est stylé avec

    .table

ne montrera aucune frontière.