Bootstrap-Tabelle ohne Streifen / Ränder


190

Ich bin mit einem CSS-Problem bei der Verwendung von Bootstrap festgefahren. Ich verwende auch Angular JS mit Angular UI.bootstrap (was möglicherweise Teil des Problems ist).

Ich erstelle eine Website, auf der Daten in einer Tabelle angezeigt werden. Manchmal enthalten die Daten Objekte, die ich in Tabellen anzeigen muss. Daher möchte ich randlose Tabellen in eine normale Tabelle einfügen und gleichzeitig die Trennlinien für die randlosen Tabellen beibehalten.

Aber es scheint, dass selbst wenn ich ausdrücklich sage, dass die Ränder auf einem Tisch nicht angezeigt werden sollen, dies erzwungen wird:

HTML:

<table class='table borderless'>

CSS:

.borderless table {
    border-top-style: none;
    border-left-style: none;
    border-right-style: none;
    border-bottom-style: none;
}

Was ich hier also will, sind nur die inneren Grenzen.


1
Welche Version von Bootstrap verwenden Sie?
Martin Bean

2
Ich benutze Bootstrap 2.3.1
Romain

mit Bootstrap 4: .borderless tr td, .borderless tr th {border: none;}
Yevhenii Shashkov

Antworten:


284

Das Rahmen-Styling wird für die tdElemente festgelegt.

html:

<table class='table borderless'>

CSS:

.borderless td, .borderless th {
    border: none;
}

Update: Seit Bootstrap 4.1 können Sie .table-borderlessden Rand entfernen.

https://getbootstrap.com/docs/4.1/content/tables/#borderless-table


11
Hinweis: Sie sollten auch hinzufügen .borderless th, da das Bootstrap-Styling auch für gilt <th>.
Benjamin

11
Wenn Sie Bootstrap 3 verwenden, überprüfen Sie meine Antwort .
Davide Pastore

42
Ich musste Grenze hinzufügen: keine! Wichtig; damit es funktioniert.
Srikanth Jeeva

@SrikanthJeeva ..oder Sie fügen einfach den CSS-Stil in die Zeile mit ein style=oder fügen ihn in eine benutzerdefinierte Datei ein und stellen sicher, dass er später als die Bootstrap-CSS-Datei geladen wird, um den Bootstrap-Standardstil zu überschreiben. CSS werden mit Bestellung geladen; Letzteres überschreibt Ersteres, je spezifischer überschreibt, desto allgemeiner.
WesternGun

1
Für Boostrap> 4.1 verwenden Sie <table class='table table-borderless'>pro Max unten
Grab

339

Bei Verwendung von Bootstrap 3.2.0 hatte ich ein Problem mit der Brett Henderson-Lösung (Grenzen waren immer vorhanden), daher habe ich sie verbessert:

HTML

<table class="table table-borderless">

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

2
Vergessen Sie nicht das th-Element im Körper: .borderless tbody tr th(wie in den Beispielen verwendet )
Wietse

2
@DavidePastore Wenn dies nur für die Tabellen gilt, stellen Sie ihm möglicherweise ein Präfix voran .table-, wie dies bei Bootstrap 3 für andere tabellenbezogene Klassen (z. B. table-stripedusw.) der Fall ist . So wird der Name sein table-borderless.
Arogachev

1
Funktioniert für v4.0.0-alpha.2. Vielen Dank!
Dominofoe

Ich bekam immer noch einen Rand am unteren Rand der Tabelle, bis ich .table-borderless,am Anfang dieser Stilspezifikation hinzufügte .
Christopher King

Ich sehe table-borderlessin diesem Dokument nicht getbootstrap.com/docs/3.3/css/#tables . Woher kam es?
Arup Rakshit

24

ähnlich wie die anderen, aber spezifischer:

    table.borderless td,table.borderless th{
     border: none !important;
}

Sie sollten nicht wichtig mit .table.borderless brauchen
Nicht geliebt

@ Sam Jones - Betrifft dies die gesamte Tabelle? Ich möchte, dass einige Zeilen einen unteren Rand haben. Ich möchte, dass die Grenze oben ist.
MarcoZen

! wichtig ist sehr wichtig
FLICKER

18

Fügen Sie die .tableKlasse nicht zu Ihrem <table>Tag hinzu. Aus den Bootstrap-Dokumenten zu Tabellen :

Für ein grundlegendes Design - leichte Polsterung und nur horizontale Trennwände - fügen Sie die Basisklasse .tablezu jeder hinzu <table>. Es mag sehr redundant erscheinen, aber angesichts der weit verbreiteten Verwendung von Tabellen für andere Plugins wie Kalender und Datumsauswahl haben wir uns entschieden, unsere benutzerdefinierten Tabellenstile zu isolieren.


Auch so: html: <table class = 'borderless'> css: .borderless {border: none; } Es funktioniert nicht.
Romain

2
Ich würde empfehlen, den Web Inspector in Chrome zu verwenden und zu prüfen, wo Rahmen angewendet werden, da Tabellen standardmäßig keine Rahmen haben, wenn Bootstrap für die Interoperabilität mit anderen Komponenten wie Datumsauswahl usw. verwendet wird.
Martin Bean

6
Das hat super geklappt, ich benutze nur die 'table-condensed' und andere Varianten ohne die 'table'-Klasse und habe die Ränder losgeworden. Toller Tipp, da die Docs mich ein bisschen dorthin geworfen haben.
Chrismacp


5

In meinem CSS:

.borderless tr td {
    border: none !important;
    padding: 0px !important;
}

In meiner Richtlinie:

<table class='table borderless'>
    <tr class='borderless' ....>

Ich habe das 'randlose' für das td-Element nicht gesetzt.

Getestet und es hat funktioniert! Alle Ränder und Polster sind komplett abgestreift.


4

Ich habe die Bootstrap-Tabellenstile wie Davide Pastore erweitert, aber mit dieser Methode werden die Stile auch auf alle untergeordneten Tabellen angewendet und gelten nicht für die Fußzeile.

Eine bessere Lösung wäre die Nachahmung der wichtigsten Bootstrap-Tabellenstile, jedoch mit Ihrer neuen Klasse:

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

Wenn Sie dann <table class='table table-borderless'>nur die bestimmte Tabelle mit der Klasse verwenden, wird diese umrandet, keine Tabelle im Baum.


3

Versuche dies:

<table class='borderless'>

CSS

.borderless {
 border:none;
}

Hinweis: Was Sie zuvor getan haben, hat nicht funktioniert, weil Ihr CSS-Code auf eine Tabelle in Ihrer .borderless-Tabelle abzielte (die wahrscheinlich nicht vorhanden war).


3

Ich weiß, dass dies ein alter Thread ist und dass Sie eine Antwort ausgewählt haben, aber ich dachte, ich würde dies posten, da es für alle anderen relevant ist, die gerade suchen.

Es gibt keinen Grund, neue CSS-Regeln zu erstellen. Machen Sie einfach die aktuellen Regeln rückgängig und die Rahmen verschwinden.

    .table> tbody> tr> th,
    .table> tbody> tr> td {
        Rand oben: 0;
    }}

in Zukunft alles gestylt mit

    .Tabelle

zeigt keine Grenzen.


2

Verwenden Sie die border-Klasse aus Boostrap 4

<td class="border-0"></td>

oder

<table class='table border-0'></table>

Stellen Sie sicher, dass Sie die Klasseneingabe mit der letzten Änderung beenden, die Sie vornehmen möchten.



1

Ich bin hier zu spät zum Spiel, aber FWIW: Wenn Sie .table-borderedzu einem hinzufügen , wird .tabledie Tabelle nur mit einem Rand umschlossen , obwohl jeder Zelle ein vollständiger Rand hinzugefügt wird.

Beim Entfernen .table-borderedbleiben jedoch die Regelzeilen erhalten. Es ist ein semantisches Problem, aber in Übereinstimmung mit der BS3 + -Nomenklatur habe ich diese Reihe von Überschreibungen verwendet:

.table.table-unruled>tbody>tr>td,
.table.table-unruled>tbody>tr>th {
  border-top: 0 none transparent;
  border-bottom: 0 none transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
  <div class="row">
    <div class="col-xs-5">
      .table
      <table class="table">
        <thead>
          <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
          </tr>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
        </tbody>
        <tfoot>
          <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
          </tr>
        </tfoot>
      </table>
    </div>
    <div class="col-xs-5 col-xs-offset-1">
      <table class="table table-bordered">
        .table .table-bordered
        <thead>
          <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
          </tr>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
        </tbody>
        <tfoot>
          <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-5">
      <table class="table table-unruled">
        .table .table-unruled
        <thead>
          <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
          </tr>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
        </tbody>
        <tfoot>
          <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
          </tr>
        </tfoot>
      </table>
    </div>
    <div class="col-xs-5 col-xs-offset-1">
      <table class="table table-bordered table-unruled">
        .table .table-bordered .table-unruled
        <thead>
          <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
          </tr>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
        </tbody>
        <tfoot>
          <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>

</div>


1

Verwenden Sie hiddenanstelle von none:

.hide-bottom {
    border-bottom-style: hidden;
}

1

Die meisten Beispiele scheinen zu spezifisch und / oder aufgebläht zu sein.

Hier war meine abgespeckte Lösung mit Bootstrap 4.0.0 (4.1 enthält, .table-borderlessaber immer noch Alpha) ...

.table-borderless th{border:0;}
.table-borderless td{border:0;}

Ähnlich wie bei vielen vorgeschlagenen Lösungen, jedoch mit minimalen Bytes 😉

Hinweis: Ich bin hier gelandet, weil ich BS4.1-Referenzen angezeigt habe und nicht herausfinden konnte, warum .table-borderlessich nicht mit meinen 4.0-Quellen gearbeitet habe (z. B. Operatorfehler, duh) 💩


Korrektur: 4.1 ist kein Alpha. Angenommen, ich habe diese Version nicht verwendet 🤣
Mavelo

1

In einigen Fällen muss in der Tabellenklasse auch der Randabstand verwendet werden, z.

Randabstand: 0! wichtig;


0

Installieren Sie den Bootstrap entweder mit npm oder cdn link

<table class="table table-borderless">
<thead>
<tr>
  <th scope="col">#</th>
  <th scope="col">First</th>
  <th scope="col">Last</th>
  <th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
  <th scope="row">1</th>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
</tr>
<tr>
  <th scope="row">2</th>
  <td>Jacob</td>
  <td>Thornton</td>
  <td>@fat</td>
  </tr>
  <tr>
  <th scope="row">3</th>
    <td colspan="2">Larry the Bird</td>
    <td>@twitter</td>
   </tr>
 </tbody>
</table>

Holen Sie sich die Referenz mit diesem Link

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.