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

Utilisez le border- de la classe Boostrap 4

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

ou

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

Veillez à terminer l'entrée de la classe par la dernière modification que vous souhaitez effectuer.

Answer 2

Utilisez hidden au lieu de none :

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

Answer 3

Celui-là a marché pour moi.

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

La clé est que vous devez ajouter border-top à l'élément <td>

Answer 4

J'interviens tardivement dans ce dossier mais, pour info, j'ajouterai ce qui suit .table-bordered à un .table se contente d'entourer le tableau d'une bordure, même si elle ajoute une bordure complète à chaque cellule.

Mais en retirant .table-bordered laisse toujours les lignes de règles. C'est une question de sémantique, mais pour respecter la nomenclature BS3+, j'ai utilisé cet ensemble de surcharges :

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

Answer 5

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

Voici la solution que j'ai trouvée en utilisant Bootstrap 4.0.0 (4.1 inclus). .table-borderless mais toujours alpha)...

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

Similaire à de nombreuses solutions proposées, mais des octets minimes

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