web-dev-qa-db-fra.com

Supprimer les lignes dans le bootstrap de Twitter

J'utilise Twitter Bootstrap pour certaines applications Web que je suis obligé de faire (je ne suis pas un développeur Web) et je ne peux pas trouver un moyen de désactiver les lignes des lignes des tableaux.

Comme vous pouvez le constater à partir de Documentation Bootstrap , le style de tableau par défaut contient des lignes.

Cordialement,

csscss3twitter-bootstrap
71
w00t

Ajoutez ceci à votre CSS principal:

table td {
    border-top: none !important;
}

Utilisez ceci pour les nouvelles versions de bootstrap:

.table th, .table td { 
     border-top: none !important; 
 }
121
Andres Ilich

Dans Bootstrap 3, j'ai ajouté une classe table-no-border

.table-no-border>thead>tr>th, 
.table-no-border>tbody>tr>th, 
.table-no-border>tfoot>tr>th, 
.table-no-border>thead>tr>td, 
.table-no-border>tbody>tr>td, 
.table-no-border>tfoot>tr>td {
  border-top: none; 
}
51
dex412

bootstrap.min.css est plus spécifique que votre propre feuille de style si vous utilisez simplement .table td. Alors utilisez ceci à la place:

.table>tbody>tr>th, .table>tbody>tr>td {
    border-top: none;
}
15
Spindle

C'est ce qui a fonctionné pour moi..

.table-no-border>thead>tr>th, 
.table-no-border>tbody>tr>th, 
.table-no-border>tfoot>tr>th, 
.table-no-border>thead>tr>td, 
.table-no-border>tbody>tr>td, 
.table-no-border>tfoot>tr>td,
.table-no-border>tbody,
.table-no-border>thead,
.table-no-border>tfoot{
  border-top: none !important; 
  border-bottom: none !important; 
}

Il a fallu éliminer l’important pour qu’il reste collé.

2
honkskillet

Inversement, si vous avez des problèmes pour AJOUTER les lignes à votre panneau, n’oubliez pas d’ajouter le à votre TABLE . Par défaut ( http://getbootstrap.com/components/#panels ), c’est supposons ajouter la ligne, mais cela m’a aidé à ajouter la balise, donc maintenant les lignes sont affichées.

L'exemple suivant "probablement" n'affichera pas les lignes entre les lignes:

<div class="panel panel-default">
    <!-- Default panel contents -->
    <div class="panel-heading">Panel heading</div>
    <!-- Table -->
    <table class="table">
        <tr><td> Hi 1! </td></tr>
        <tr><td> Hi 2! </td></tr>
    </table>
</div>

L'exemple suivant affiche les lignes entre les lignes:

<div class="panel panel-default">
    <!-- Default panel contents -->
    <div class="panel-heading">Panel heading</div>
    <!-- Table -->
    <table class="table">
        <thead></thead>
        <tr><td> Hi 1! </td></tr>
        <tr><td> Hi 2! </td></tr>
    </table>
</div>
0
Juan Castellon

Vous avez la même question d'un ami. Ma suggestion qui ne nécessite pas !Important ressemble à ceci: J'ajoute une classe personnalisée "no-border" qui peut être ajoutée à la table d'amorçage.

.table.no-border tr td, .table.no-border tr th {
  border-width: 0;
}

Vous pouvez voir mon aller à une solution ici

0
Netsi1964