web-dev-qa-db-fra.com

Table Bootstrap sans bande ni bordure

Je suis un peu coincé avec un problème CSS lors de l'utilisation de Bootstrap. J'utilise aussi 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 un tableau . Parfois, les données contiennent des objets que je dois afficher dans des tableaux . Je souhaite donc placer des tableaux sans bordure dans un tableau normal tout en conservant les lignes de séparation à l'intérieur. les tables sans frontières. 

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

htmlcsstwitter-bootstrap
160
Romain

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

html:

<table class='table borderless'>

css:

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

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

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

238
Brett Henderson

En utilisant Bootstrap 3.2.0, j'avais un problème avec la solution de Brett Henderson (les frontières étaient toujours présentes), 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;
}
314
Davide Pastore

semblable au reste, mais plus spécifique:

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

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

Pour un style de base - remplissage léger et uniquement des séparateurs horizontaux - ajoutez la classe de base .table à un <table>. Cela peut sembler super redondant, mais étant donné l’utilisation généralisée des tableaux pour d’autres plugins comme les calendriers et les sélecteurs de date, nous avons choisi d’isoler nos styles de tableau personnalisés.

17
Martin Bean

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

<table class='table table-borderless'>
6
Max

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 «sans frontière» pour l'élément td.

Testé et cela a fonctionné!.

5
Daniel C. Deng

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 serait d'imiter les styles de table Bootstrap 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;
}

Ensuite, lorsque vous utilisez <table class='table table-borderless'>, seule la table spécifique de la classe sera délimitée, pas une table de l’arborescence.

4
shellco

Essaye ça:

<table class='borderless'>

CSS

.borderless {
 border:none;
}

Remarque: ce que vous faisiez auparavant ne fonctionnait pas car votre code CSS ciblait une table de votre table .borderless (qui n'existait probablement pas) 

3
Danield

Utilisez la classe border- de Bootstrap 4

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

ou

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

Assurez-vous de mettre fin à la classe avec le dernier changement que vous souhaitez effectuer.

2
Steffo Dimfelt

Je sais que c'est un vieux fil et que vous avez choisi une réponse, mais je pensais que je posterais ce message car il est pertinent pour quiconque est actuellement à la recherche.

Il n'y a aucune raison de créer de nouvelles règles CSS, il suffit simplement d'annuler 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 ce qui est stylé avec

 .table

montrera pas de frontières.

2
Don Escobar

Je suis en retard pour le jeu ici mais FWIW: ajouter .table-bordered à un .table encapsule simplement la table avec une bordure, bien qu’en ajoutant une bordure complète à chaque cellule. 

Mais supprimer .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 substitutions:

.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
fnostro

Utilisez hidden au lieu de none:

.hide-bottom {
    border-bottom-style: hidden;
}
1
dev pro

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

Voici ma solution optimisée utilisant Bootstrap 4.0.0 (4.1 inclut .table-borderless mais toujours alpha) ...

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

Semblable à de nombreuses solutions proposées, mais un minimum d'octets ????

Remarque: je me suis retrouvé ici parce que je visionnais les références BS4.1 et ne pouvais pas comprendre pourquoi .table-borderless ne fonctionnait pas avec mes sources 4.0 (par exemple: erreur de l'opérateur, duh) ????

0
Mavelo