Bootstrap-Tabelle ohne Streifen / Ränder

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.

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

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

ähnlich wie die anderen, aber spezifischer:

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

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.

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

<table class='table table-borderless'>

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.

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.

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

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.

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.

Dieser hat für mich gearbeitet.

<td style="border-top: none;">;

Der Schlüssel ist, dass Sie dem Rand einen Rand hinzufügen müssen <td>

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>

Verwenden Sie hiddenanstelle von none:

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

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

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

Randabstand: 0! wichtig;

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