Table Bootstrap sans rayures / 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 (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 des objets que je dois afficher dans des tableaux. Je veux donc mettre des tables sans bordure dans une table normale tout en gardant à l'intérieur des lignes de séparation pour les tables sans bordure.

Mais il semble que même si je dis spécifiquement de ne pas montrer les bordures 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;
}

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

Le style de la bordure est défini sur les 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-borderlesspour supprimer la bordure.

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

En utilisant Bootstrap 3.2.0, j'ai eu un problème avec la solution 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;
}

similaire au reste, mais plus spécifique:

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

N'ajoutez pas le .table classe à votre <table>tag. À partir de la documentation Bootstrap sur les tables :

Pour un style de base (rembourrage léger et séparateurs horizontaux uniquement), ajoutez la classe de base .tableà n'importe laquelle <table>. Cela peut sembler super redondant, mais étant donné l'utilisation généralisée des tableaux pour d'autres plugins tels que les calendriers et les sélecteurs de dates, nous avons choisi d'isoler nos styles de tableaux personnalisés.

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

<table class='table table-borderless'>

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 cela a fonctionné! Toutes les bordures et rembourrages sont complètement dénudés.

J'ai développé les styles de tableau 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 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'>uniquement la table spécifique avec la classe sera bordée, pas n'importe quelle table dans l'arborescence.

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 dans votre table .borderless (qui n'existait probablement pas)

Je sais que c'est un vieux fil de discussion et que vous avez choisi une réponse, mais je pensais que je publierais ceci car il est pertinent pour quiconque recherche actuellement.

Il n'y a aucune raison de créer de nouvelles règles CSS, annulez simplement 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.

Utilisez la border-classe 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 souhaitez effectuer.

Celui-ci a fonctionné pour moi.

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

La clé est que vous devez ajouter une bordure supérieure au <td>

Je suis en retard au jeu ici mais FWIW: l'ajout .table-borderedà un .tableenveloppe juste le tableau avec une bordure, bien qu'en ajoutant une bordure complète à chaque cellule.

Mais la suppression .table-borderedlaisse toujours les lignes de règles. 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>

Utilisez à la hiddenplace de none:

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

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-borderlessmais toujours alpha) ...

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

Similaire à de nombreuses solutions proposées, mais octets minimaux 😉

Remarque: Je me suis retrouvé ici parce que je regardais les références BS4.1 et que je ne pouvais pas comprendre pourquoi .table-borderlessje ne travaillais pas avec mes sources 4.0 (par exemple: erreur d'opérateur, duh)

Dans certains cas, il faut également utiliser l'espacement des bordures dans la classe de table, comme:

espacement des bordures: 0! important;

Installez bootstrap avec un 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 ce lien