Tabella Bootstrap senza strisce / bordi

Sono un po 'bloccato con un problema CSS durante l'utilizzo di Bootstrap. Sto anche usando Angular JS con Angular UI.bootstrap (che potrebbe essere parte del problema).

Sto realizzando un sito Web che visualizza i dati in una tabella. A volte, i dati contengono oggetti che devo visualizzare nelle tabelle. Quindi voglio mettere le tabelle senza bordi all'interno di una tabella normale mantenendo al contempo le linee di separazione per le tabelle senza bordi.

Ma sembra che anche se dico specificamente di non mostrare i bordi su un tavolo, è costretto:

HTML:

<table class='table borderless'>

CSS:

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

Quindi qui, quello che voglio sono solo i bordi interni.

Lo stile del bordo è impostato sugli tdelementi.

html:

<table class='table borderless'>

css:

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

Aggiornamento: da Bootstrap 4.1 è possibile utilizzare .table-borderlessper rimuovere il bordo.

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

Usando Bootstrap 3.2.0 ho avuto problemi con la soluzione di Brett Henderson (i bordi erano sempre presenti), quindi l'ho migliorato:

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

simile al resto, ma più specifico:

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

Non aggiungere la .tableclasse al tuo <table>tag. Dai documenti Bootstrap sulle tabelle :

Per uno stile base - imbottitura leggera e solo divisori orizzontali - aggiungi la classe base .tablea qualsiasi <table>. Può sembrare super ridondante, ma dato l'uso diffuso di tabelle per altri plugin come calendari e selettori di date, abbiamo deciso di isolare i nostri stili di tabella personalizzati.

Da Bootstrap v4.1 è possibile aggiungere table-borderlessalla tabella, consultare la documentazione ufficiale :

<table class='table table-borderless'>

Nel mio CSS:

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

Nella mia direttiva:

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

Non ho inserito il 'borderless' per l'elemento td.

Testato e ha funzionato! Tutti i bordi e le imbottiture sono completamente rimossi.

Ho ampliato gli stili di tabella Bootstrap come ha fatto Davide Pastore, ma con quel metodo gli stili vengono applicati anche a tutte le tabelle figlio e non si applicano al piè di pagina.

Una soluzione migliore sarebbe imitare i principali stili di tabella Bootstrap, ma con la tua nuova classe:

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

Quindi, quando si utilizza <table class='table table-borderless'>solo la tabella specifica con la classe verrà delimitata, non alcuna tabella nella struttura.

Prova questo:

<table class='borderless'>

CSS

.borderless {
 border:none;
}

Nota: quello che stavi facendo prima non funzionava perché il tuo codice css aveva come target una tabella all'interno della tua tabella .borderless (che probabilmente non esisteva)

So che questa è una vecchia discussione e che hai scelto una risposta, ma ho pensato di pubblicarla perché è pertinente per chiunque stia attualmente cercando.

Non vi è alcun motivo per creare nuove regole CSS, è sufficiente annullare le regole correnti e i bordi scompaiono.

    .table> tbody> tr> th,
    .table> tbody> tr> td {
        bordo superiore: 0;
    }

andando avanti, qualsiasi cosa con stile

    .tavolo

non mostrerà confini.

Usa la border-classe da Boostrap 4

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

o

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

Assicurati di terminare l'input di classe con l'ultima modifica che vuoi fare.

Questo ha funzionato per me.

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

La chiave è che devi aggiungere border-top al file <td>

Sono in ritardo al gioco qui ma FWIW: l'aggiunta .table-bordereda un .tableavvolge il tavolo con un bordo, anche se aggiungendo un bordo completo a ogni cella.

Ma la rimozione .table-borderedlascia ancora le linee guida. È un problema semantico, ma in linea con la nomenclatura BS3 + ho usato questo set di sostituzioni:

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

Usa hiddeninvece di none:

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

La maggior parte degli esempi sembra essere troppo specifica e / o gonfia.

Ecco la mia soluzione ridotta usando Bootstrap 4.0.0 (4.1 include .table-borderlessma ancora alpha) ...

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

Simile a molte soluzioni proposte, ma byte minimi 😉

Nota: sono finito qui perché stavo visualizzando riferimenti BS4.1 e non riuscivo a capire perché .table-borderlessnon funzionassi con le mie fonti 4.0 (ad esempio: errore dell'operatore, duh) 💩

In alcuni casi, è necessario utilizzare anche la spaziatura dei bordi nella classe della tabella, come:

spaziatura dei bordi: 0! importante;

Installa bootstrap con npm o 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>

ottenere il riferimento con questo link