it-swarm.com.de

Zeilenlinien in Twitter-Bootstrap entfernen

Ich verwende Twitter-Bootstrap für einige Web-Apps, die ich tun muss (ich bin kein Web-Entwickler), und ich finde keine Möglichkeit, die Zeilenlinien für Tabellen zu deaktivieren.

Wie aus der Bootstrap-Dokumentation ersichtlich, enthält der Standardtabellenstil Zeilenzeilen.

Grüße,

71
w00t

Fügen Sie dies Ihrem Haupt-CSS hinzu:

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

Verwenden Sie dies für neuere Versionen von Bootstrap:

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

In Bootstrap 3 habe ich eine table-no-border-Klasse hinzugefügt

.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 ist genauer als Ihr eigenes Stylesheet, wenn Sie nur .table td verwenden. Verwenden Sie also stattdessen Folgendes:

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

Das hat bei mir funktioniert ..

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

Musste das! Wichtig herausziehen, damit es haften bleibt.

2
honkskillet

Umgekehrt, wenn Sie Probleme beim Hinzufügen der Zeilen zu Ihrem Panel haben, vergessen Sie nicht, das TABLE zu Ihrem TABLE ..__ hinzuzufügen. Standardmäßig ( http://getbootstrap.com/components/#panels ) ist dies der Fall Nehmen Sie an, die Zeile hinzuzufügen, aber es hat mir geholfen, das Tag hinzuzufügen, sodass jetzt die Zeilenzeilen angezeigt werden.

Im folgenden Beispiel werden "wahrscheinlich" die Zeilen zwischen den Zeilen nicht angezeigt:

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

Das folgende Beispiel zeigt die Zeilen zwischen den Zeilen an:

<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

Bekam die gleiche Frage von einem Freund. Mein Vorschlag, der !Important nicht erfordert, sieht folgendermaßen aus: Ich füge eine benutzerdefinierte Klasse "no-border" hinzu, die zur Bootstrap-Tabelle hinzugefügt werden kann.

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

Sie können mein Los bei einer Lösung hier sehen

0
Netsi1964