wake-up-neo.net

Bootstrap-Tabelle ohne Streifen/Ränder

Ich stecke irgendwie mit einem CSS-Problem während der Verwendung von Bootstrap. Ich verwende auch Angular JS mit Angular UI.bootstrap (was möglicherweise ein Teil des Problems ist).

Ich erstelle eine Website, auf der Daten in einer Tabelle angezeigt werden. Irgendwann enthalten die Daten ein Objekt, das ich in Tabellen anzeigen muss ... So möchte ich randlose Tabellen in eine normale Tabelle einfügen, wobei die Trennlinien beibehalten werden die randlosen Tische. 

Aber selbst wenn ich ausdrücklich sage, die Grenzen auf einem Tisch nicht darzustellen, scheint es:

HTML:

<table class='table borderless'>

CSS:

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

Also, was ich will, sind nur die inneren Grenzen.

160
Romain

Die Umrandung wird in den td-Elementen festgelegt.

html:

<table class='table borderless'>

css:

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

Update: Seit Bootstrap 4.1 können Sie den Rand mit .table-borderless entfernen.

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

238
Brett Henderson

Mit Bootstrap 3.2.0 hatte ich ein Problem mit der Lösung von Brett Henderson (Grenzen waren immer da), also habe ich es 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;
}
314
Davide Pastore

dem Rest ähnlich, aber genauer:

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

Fügen Sie die .table-Klasse nicht Ihrem <table>-Tag hinzu. Aus den Bootstrap-Dokumenten auf tables :

Für einfaches Styling - helle Auffüllung und nur horizontale Trennwände - fügen Sie die Basisklasse .table zu einem beliebigen <table> hinzu. Es mag überflüssig erscheinen, aber da Tabellen für andere Plugins wie Kalender und Datumsauswahl weit verbreitet sind, haben wir uns entschieden, unsere benutzerdefinierten Tabellenstile zu isolieren.

17
Martin Bean

Seit Bootstrap v4.1 können Sie table-borderless zu Ihrer Tabelle hinzufügen, siehe offizielle Dokumentation :

<table class='table table-borderless'>
6
Max

In meinem CSS:

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

In meiner Weisung:

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

Ich habe das "randlos" nicht für das td-Element gesetzt.

Getestet und es hat funktioniert! Alle Bordüren und Polsterungen sind komplett abgezogen.

5
Daniel C. Deng

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

Eine bessere Lösung wäre das Nachahmen der Kernstile der Bootstrap-Tabelle, 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 <table class='table table-borderless'> verwenden, wird dann nur die bestimmte Tabelle mit der Klasse umrahmt, nicht jedoch jede Tabelle in der Baumstruktur.

4
shellco

Versuche dies:

<table class='borderless'>

CSS

.borderless {
 border:none;
}

Anmerkung: Was Sie zuvor getan haben, funktionierte nicht, da Ihr CSS-Code auf eine Tabelle in Ihrer .borderless-Tabelle abzielte (die wahrscheinlich nicht vorhanden war) 

3
Danield

Verwenden Sie die border--Klasse von Bootstrap 4

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

oder

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

Beenden Sie die Klasseneingabe mit der letzten Änderung, die Sie vornehmen möchten.

2
Steffo Dimfelt

Ich weiß, dass dies ein alter Thread ist und dass Sie eine Antwort ausgewählt haben, aber ich dachte, ich würde das hier 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 Ränder verschwinden.

 .tabelle> tbody> tr> th, 
 .table> tbody> tr> td {
 Border-Top: 0; 
 } 

in der Zukunft alles mit

 .Tabelle

zeigt keine Grenzen.

2
Don Escobar

Ich bin spät dran im Spiel, aber FWIW: Das Hinzufügen von .table-bordered zu einem .table umschließt die Tabelle einfach mit einer Umrandung, wenngleich in jeder Zelle eine vollständige Umrandung eingefügt wird. 

Wenn Sie jedoch .table-bordered entfernen, bleiben die Regelzeilen erhalten. Es ist ein semantisches Problem, aber in Übereinstimmung mit der BS3 + -Nomenklatur habe ich diesen Satz 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
fnostro

Verwenden Sie hidden anstelle von none:

.hide-bottom {
    border-bottom-style: hidden;
}
1
dev pro

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-borderless, aber immer noch Alpha) ...

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

Ähnlich wie viele Lösungsvorschläge, aber minimale Bytes ????

Hinweis: Endete hier, weil ich BS4.1-Referenzen angesehen habe und nicht herausfinden konnte, warum .table-borderless nicht mit meinen 4.0-Quellen arbeitete (z.

0
Mavelo