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 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 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.
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;
}
Mise à jour: Depuis Bootstrap 4.1, vous pouvez utiliser .table-borderless
pour supprimer la bordure.
https://getbootstrap.com/docs/4.1/content/tables/#borderless-table
N'ajoutez pas la classe .table
à votre balise <table>
. Extrait de la documentation Bootstrap sur les [tables][1] :
Pour un style de base - rembourrage léger et seulement des séparateurs horizontaux- ajoutez la classe de base
.table
à n'importe quelle<table>
. Cela peut sembler super redondant, mais étant donné l’utilisation répandue 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.