Je suis un peu coincé avec un problème CSS en utilisant 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 un object que je dois afficher dans les tables. Je souhaite donc placer des tables sans bordure dans une table normale tout en conservant les lignes de séparation des tables sans bordure.
Mais il semble que même si je dis spécifiquement de ne pas montrer les frontières sur une table, elle est forcée:
HTML:
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 les frontières intérieures.
- Quelle est la différence si je mets le fichier css dans ou ?
- Centre surdimensionné Image en Div
- Les éléments en ligne changent quand ils sont audacieux en vol stationnaire
- Rend la div absolue positionnée de la hauteur du div parent
- Comment sélectionner le premier et le dernier TD dans une rangée?
Le style de bordure est défini sur les éléments td
.
html:
css:
.borderless td, .borderless th { border: none; }
En utilisant Bootstrap 3.2.0, j’ai eu un problème avec la solution Brett Henderson (les bordures étaient toujours là), alors je l’ai amélioré:
HTML
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 rest, mais plus spécifique:
table.borderless td,table.borderless th{ border: none !important; }
.table
pas la classe .table
à votre
. À partir des documents Bootstrap sur les tables :
Pour un style de base – un remplissage léger et uniquement des séparations horizontales – insérez la classe de base .table
dans n’importe quelle
. Cela peut sembler super redondant, mais étant donné l’utilisation répandue des tables pour d’autres plug-ins comme les calendriers et les sélecteurs de dates, nous avons opté pour l’isolement de nos styles de tableaux personnalisés.
Depuis Bootstrap v4.1, vous pouvez append la table-borderless
à votre table, voir la documentation officielle :
Dans mon CSS:
.borderless tr td { border: none !important; padding: 0px !important; }
Dans ma directive:
Je n’ai pas mis le ‘sans frontières’ pour l’élément td.
Testé et ça a marché! Toutes les bordures et les rembourrages sont complètement dépouillés.
Essaye ça:
CSS
.borderless { border:none; }
Remarque: Ce que vous faisiez avant ne fonctionnait pas car votre code css visait une table dans votre table .borderless (qui n’existait probablement pas)
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 consisterait à imiter les principaux styles de table Bootstrap, 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
seule la table spécifique avec la classe sera bordée, pas n’importe quelle table dans l’arborescence.
Je sais que c’est un vieux sujet et que vous avez choisi une réponse, mais j’ai pensé que je posterais ceci car il est pertinent pour quiconque est actuellement à la recherche.
Il n’y a aucune raison de créer de nouvelles règles CSS, annulez simplement 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 avec style
.table
ne montrera aucune frontière.
Je suis en retard sur le jeu ici, mais FWIW: l’ajout de .table-bordered
à une .table
ne fait .table
une .table
à la table, mais 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 modifications:
.table.table-unruled>tbody>tr>td, .table.table-unruled>tbody>tr>th { border-top: 0 none transparent; border-bottom: 0 none transparent; }
.table a b c a b c a b c a b c
.table .table-bordered a b c a b c a b c a b c
.table .table-unruled a b c a b c a b c a b c
.table .table-bordered .table-unruled a b c a b c a b c a b c
Utiliser hidden
au lieu de none
:
.hide-bottom { border-bottom-style: hidden; }
Utilisez la classe border de Boostrap 4
ou
Veillez à terminer la saisie de la classe avec le dernier changement que vous souhaitez effectuer.
Celui-ci a fonctionné pour moi.
;
La clé est que vous devez append border-top au
- Style d’entrée de la case à cocher CSS
- Est-il possible de styliser une boîte de sélection?
- Opacité CSS ne fonctionne pas dans IE8
- Utiliser des fonts personnalisées en utilisant CSS?
- Comment puis-je mettre à l’échelle une image dans un sprite CSS
- Y a-t-il un opposé à afficher: aucun?
- Perdre le style d’un dans dans un object flash?
- Comment désactiver par programmation le défilement de la page avec jQuery
- Css points de suspension sur la deuxième ligne
- Comment faire en sorte que les coins arrondis CSS3 masquent le débordement dans Chrome / Opera