Stół do ładowania bez paska / obramowań

Trochę utknąłem z problemem CSS podczas korzystania z Bootstrap. Używam również Angular JS z Angular UI.bootstrap (co może być częścią problemu).

Tworzę stronę internetową, która wyświetla dane w tabeli. Czasami dane zawierają obiekt, który muszę wyświetlić w tabelach. Dlatego chcę umieścić tabele bez obramowania w normalnym stole, zachowując wewnętrzne linie separacji dla tabel bez obramowania.

Ale wydaje się, że nawet jeśli wyraźnie powiem, aby nie pokazywać granic na stole, jest to wymuszone:

HTML:

<table class='table borderless'>

CSS:

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

Więc tutaj chcę tylko wewnętrznych granic.

Obramowanie jest ustawione na tdelementach.

HTML:

<table class='table borderless'>

css:

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

Aktualizacja: Od wersji Bootstrap 4.1 możesz .table-borderlessusunąć obramowanie.

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

Korzystając z Bootstrap 3.2.0 miałem problem z rozwiązaniem Brett Henderson (zawsze były tam granice), więc go poprawiłem:

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

podobne do pozostałych, ale bardziej szczegółowe:

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

Nie dodawaj .tableklasy do <table>tagu. Z dokumentów Bootstrap w tabelach :

Do podstawowej stylizacji - lekkiej wyściółki i tylko poziomych przekładek - dodaj klasę podstawową .tabledo dowolnej <table>. Może się to wydawać zbędne, ale biorąc pod uwagę powszechne użycie tabel w innych wtyczkach, takich jak kalendarze i selektory dat, zdecydowaliśmy się wyodrębnić nasze niestandardowe style tabel.

Od wersji Bootstrap 4.1 możesz dodać table-borderlessdo swojej tabeli, zobacz oficjalną dokumentację :

<table class='table table-borderless'>

W moim CSS:

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

W mojej dyrektywie:

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

Nie umieściłem „bez obramowania” dla elementu td.

Przetestowane i działało! Wszystkie obramowania i wypełnienia są całkowicie zdjęte.

Rozszerzyłem style tabel Bootstrap, jak zrobił to Davide Pastore, ale dzięki tej metodzie style są również stosowane do wszystkich tabel potomnych i nie mają zastosowania do stopki.

Lepszym rozwiązaniem byłoby naśladowanie podstawowych stylów tabeli Bootstrap, ale z nową klasą:

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

Wtedy, gdy użyjesz <table class='table table-borderless'>tylko określonej tabeli z klasą, zostanie ona otoczona, a nie jakakolwiek tabela w drzewie.

Spróbuj tego:

<table class='borderless'>

CSS

.borderless {
 border:none;
}

Uwaga: To, co robiłeś wcześniej, nie działało, ponieważ Twój kod css był kierowany na tabelę w tabeli .borderless (która prawdopodobnie nie istniała)

Wiem, że to stary wątek i wybrałeś odpowiedź, ale pomyślałem, że opublikuję to, ponieważ jest to istotne dla każdego, kto obecnie szuka.

Nie ma powodu, aby tworzyć nowe reguły CSS, po prostu cofnij obecne reguły, a ramki znikną.

    .table> tbody> tr> th,
    .table> tbody> tr> td {
        border-top: 0;
    }

idąc naprzód, wszystko w stylu

    .stół

nie pokaże granic.

Skorzystaj z border-klasy z Boostrap 4

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

lub

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

Pamiętaj, aby zakończyć wprowadzanie klasy ostatnią zmianą, którą chcesz wprowadzić.

Ten działał dla mnie.

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

Kluczem jest to, że musisz dodać obramowanie do <td>

Spóźniłem się tutaj na grę, ale FWIW: dodanie .table-bordereddo .tablewłaśnie owija tabelę ramką, aczkolwiek poprzez dodanie pełnej ramki do każdej komórki.

Ale usunięcie .table-borderednadal pozostawia linie reguł. To kwestia semantyczna, ale zgodnie z nomenklaturą BS3 + użyłem tego zestawu przesłonięć:

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

Posługiwać się hidden zamiast none:

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

Większość przykładów wydaje się być zbyt specyficzna i / lub rozdęta.

Oto moje ograniczone rozwiązanie za pomocą Bootstrap 4.0.0 (4.1 zawiera .table-borderlessale wciąż alfa) ...

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

Podobne do wielu proponowanych rozwiązań, ale minimalne bajty 😉

Uwaga: skończyłem tutaj, ponieważ przeglądałem referencje BS4.1 i nie mogłem zrozumieć, dlaczego .table-borderlessnie działa z moimi źródłami 4.0 (np .: błąd operatora, duh) 💩

W niektórych przypadkach należy również użyć odstępów między ramkami w klasie tabeli, takich jak:

odstępy między krawędziami: 0! ważne;

Zainstaluj bootstrap z linkiem npm lub cdn

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

uzyskaj referencję z tym linkiem