Entfernen Sie Zeilenzeilen im Twitter-Bootstrap

72

Ich verwende Twitter-Bootstrap für eine Web-App, zu der ich gezwungen bin (ich bin kein Webentwickler), und ich kann keine Möglichkeit finden, die Zeilenzeilen für Tabellen zu deaktivieren.

Wie Sie der Bootstrap-Dokumentation entnehmen können , enthält der Standardtabellenstil Zeilenzeilen.

Grüße,

css twitter-bootstrap w00t
quelle
1
Versucht, dass nichts gefunden werden kann, was offensichtlich wäre, beinhaltet keines der Elemente die Verwendung einer CSS-Klasse.
w00t

Antworten:

124

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; 
 }
Andres Ilich
quelle
Funktioniert bei mir nicht Ich habe es in den HTML / Head / Style-Teil eingefügt, aber Chrome zeigt es mit Durchgestrichen an, als würde es nicht verwendet. Irgendwelche Ideen?
Martin Wickman
3
@MartinWickman Diese Antwort wurde für eine frühere Version des Bootstraps geschrieben (ein Punkt zu der Zeit), daher erfordert diese Methode, dass die !importantRegel funktioniert. Sie können dies jedoch umgehen, indem Sie den Selektor etwas spezifischer gestalten: .table th, .table td { border-top: none; }
Andres Ilich
47
Überschreiben Sie solche Stile nicht global. Verwenden Sie eine neue CSS-Klasse, anstatt die Standardeinstellung für ALLE Tabellen zu überschreiben. .table-borderless td, .table-borderless th { border: 0; }von coderwall.com/p/hfurca
Peter Davis
5
@AndresIlich - Right - Bootstrap legt einen Standardstil für alle Tabellen fest. Ich habe abgelehnt, weil es eine schlechte Idee ist, auf globaler Ebene zu überschreiben. Sie verursachen unbeabsichtigte Konsequenzen für Tabellen, die Ränder haben sollten.
Peter Davis
4
@AndresIlich Ich denke, was PeterDavis sagen wollte, war, anstatt globale Stile zu überschreiben, den Tabellen, auf die er abzielt, eine Klasse ohne Grenzen hinzuzufügen und diese entsprechend zu gestalten. Ich denke, die Antwort von dex412 drückt genau aus, was er meinte. Verstehen Sie nicht, warum Sie darauf bestehen, dass das Überschreiben von Globals die einzige Lösung war.
Maryisdead
51

In Bootstrap 3 habe ich eine Tabelle ohne Rand 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; 
}
dex412
quelle
4
Diese Lösung hat bei mir funktioniert, während die anderen dies nicht getan haben (einschließlich der Lösungen hier ). Verwenden von Bootstrap 3 über bootstrap-sassin Rails.
Dennis
1
In meinem Fall funktioniert es nicht. Ich verwende eine responsive Tabelle und habe ihre class ( .table-responsive) auf keinen Rand geändert .
ArCiGo
15

bootstrap.min.css ist spezifischer als Ihr eigenes Stylesheet, wenn Sie nur .table td verwenden. Verwenden Sie stattdessen Folgendes:

.table>tbody>tr>th, .table>tbody>tr>td {
    border-top: none;
}
Spindel
quelle
Ich musste etwas Ähnliches tun, um nur ein paar Zellen .table > tbody > tr > td.no-line { border-top: none; }
anzuvisieren
Zusammen mit einem Klassenkreuzungswähler hat mich das überzeugt. Danke
nemesisfixx
2

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! Wichtige auspeitschen, damit es klebt.

Honkskillet
quelle
es funktioniert, aber nicht so, es funktioniert für !important
vamsikrishnamannem
0

Habe die gleiche Frage von einem Freund bekommen. Mein Vorschlag, der nicht erforderlich ist, !Importantsieht folgendermaßen aus: Ich füge eine benutzerdefinierte Klasse " no-border" hinzu, die der Bootstrap-Tabelle hinzugefügt werden kann.

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

Sie können sehen, wie ich hier eine Lösung finde

Netsi1964
quelle
0

Umgekehrt, wenn Sie Probleme haben, die Zeilen zu Ihrem Panel hinzuzufügen, vergessen Sie nicht, die zu Ihrer TABELLE hinzuzufügen. Standardmäßig ( http://getbootstrap.com/components/#panels ) wird angenommen, dass die Zeile hinzugefügt wird. Es hat mir jedoch geholfen, das Tag hinzuzufügen, sodass jetzt die Zeilenzeilen angezeigt werden.

Das folgende Beispiel "wahrscheinlich" zeigt die Zeilen zwischen den Zeilen nicht an:

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

Im folgenden Beispiel werden die Zeilen zwischen den Zeilen angezeigt:

<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>
Juan Castellon
quelle