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.
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;
}
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;
}
Similaire au reste, mais plus spécifique:
table.borderless td,table.borderless th{
border: none !important;
}
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.
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.
Depuis Bootstrap v4.1-vous pouvez ajouter table-borderless à votre table, voir la documentation officielle:
<table class='table table-borderless'>
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)
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.
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.
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>Utiliser hidden au lieu de none:
.hide-bottom {
border-bottom-style: hidden;
}
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.
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)
Celui-ci a fonctionné pour moi.
<td style="border-top: none;">;
La clé est que vous devez ajouter border-top au <td>