Bootstrap table sans bande / bordures

Je suis un peu coincé avec un problème CSS lors de l'utilisation de Bootstrap. J'utilise également Angular Js avec Angular UI.bootstrap (qui pourrait faire partie du problème).

Je crée un site web qui affiche des données dans une table. Parfois, les données contiennent des objets que je dois afficher dans des tables. Donc, je veux mettre des tables sans frontières dans une table normale tout en gardant à l'intérieur des lignes de séparation pour les tables sans frontières.

Mais il semble que même si je dis spécifiquement de ne pas montrer les frontières sur un table, il 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 frontières intérieures.

147
demandé sur ROMANIA_engineer 2013-08-06 12:59:52

14 réponses

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

Html:

<table class='table borderless'>

Css:

.borderless td, .borderless th {
    border: none;
}
206
répondu Brett Henderson 2015-03-05 05:31:16

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

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;
}
301
répondu Davide Pastore 2017-03-08 14:50:09

Similaire au reste, mais plus spécifique:

    table.borderless td,table.borderless th{
     border: none !important;
}
22
répondu Sam Jones 2014-09-24 16:03:44

N'ajoutez pas la classe .table à votre balise <table>. À partir des documents Bootstrap sur tables :

Pour le style de base-rembourrage léger et seulement les diviseurs horizontaux - ajouter la classe de base .table à n'importe quel <table>. Cela peut sembler super redondant, mais compte tenu de l'utilisation généralisée des tables pour d'autres plugins comme les calendriers et les sélecteurs de date, nous avons choisi d'isoler nos styles de table personnalisés.

16
répondu Martin Bean 2013-08-06 09:11:06

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 les rembourrages sont complètement dépouillés.

5
répondu Daniel C. Deng 2015-01-17 00:32:58

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

<table class='table table-borderless'>
5
répondu Max 2018-04-28 20:07:53

Essayez ceci:

<table class='borderless'>

CSS

.borderless {
 border:none;
}

Note: Ce que vous faisiez auparavant ne fonctionnait pas parce que votre code css ciblait une table dans votre .table sans bordure (qui n'existait probablement pas)

3
répondu Danield 2013-08-06 09:09:00

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

Une meilleure solution serait d'imiter les styles de table D'amorçage de base, 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;
}

, Puis lorsque vous utilisez <table class='table table-borderless'> seulement la table avec la classe sera bordé, pas n'importe quelle table dans l'arbre.

3
répondu shellco 2016-11-04 04:52:54

Je sais que c'est un vieux fil et que vous avez choisi une réponse, mais j'ai pensé que je publierais ceci car il est pertinent pour quelqu'un d'autre 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 frontières disparaîtront.


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

À L'avenir, tout ce qui est stylé avec

    .table

Ne montrera pas de frontières.

1
répondu Don Escobar 2017-06-29 21:53:41

Je suis en retard au jeu ici mais FWIW: ajouter .table-bordered à un .table enveloppe simplement la table avec une bordure, bien qu'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 remplacements:

.table.table-unruled>tbody>tr>td,
.table.table-unruled>tbody>tr>th {
  border-top: 0 none transparent;
  border-bottom: 0 none transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
  <div class="row">
    <div class="col-xs-5">
      .table
      <table class="table">
        <thead>
          <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
          </tr>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
        </tbody>
        <tfoot>
          <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
          </tr>
        </tfoot>
      </table>
    </div>
    <div class="col-xs-5 col-xs-offset-1">
      <table class="table table-bordered">
        .table .table-bordered
        <thead>
          <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
          </tr>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
        </tbody>
        <tfoot>
          <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-5">
      <table class="table table-unruled">
        .table .table-unruled
        <thead>
          <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
          </tr>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
        </tbody>
        <tfoot>
          <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
          </tr>
        </tfoot>
      </table>
    </div>
    <div class="col-xs-5 col-xs-offset-1">
      <table class="table table-bordered table-unruled">
        .table .table-bordered .table-unruled
        <thead>
          <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
          </tr>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
        </tbody>
        <tfoot>
          <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>

</div>
1
répondu fnostro 2017-07-28 18:06:12

Utiliser hidden au lieu de none:

.hide-bottom {
    border-bottom-style: hidden;
}
1
répondu dev pro 2017-09-04 14:04:48

Utilisez la classe border- de Boostrap 4

<td class="border-0"></td>

Ou

<table class='table border-0'></table>

Assurez-vous de terminer l'entrée de classe avec la dernière modification que vous voulez faire.

1
répondu Steffo Dimfelt 2018-04-12 07:48:52

La plupart des exemples semblent trop spécifiques et / ou gonflés.

Voici ma solution réduite en utilisant Bootstrap 4.0.0 (4.1 inclut .table-borderless mais toujours alpha)...

.table-borderless th{border:0;}
.table-borderless td{border:0;}

Similaire à de nombreuses solutions proposées, mais un nombre minimal d'octets

Note: J'ai fini ici parce que je regardais les références BS4.1 et je ne pouvais pas comprendre pourquoi .table-borderless ne fonctionnait pas avec mes sources 4.0 (par exemple: erreur d'opérateur, duh)

0
répondu Mavelo 2018-09-29 15:55:09

Celui-ci a fonctionné pour moi.

<td style="border-top: none;">;

La clé est que vous devez ajouter border-top au <td>

-1
répondu Used Cars 2014-03-25 21:02:22