Tabella bootstrap. Come rimuovere tutti i bordi dalla tabella?

Question

Come rimuovere tutti i bordi (specialmente quelli esterni) da bootstrap table? Ecco una tabella senza frontiere interne:

HTML

<style> 
    .table th, .table td { 
     border-top: none !important; 
     border-left: none !important; 
    } 
</style> 
<div class="row"> 
    <div class="col-xs-1"></div> 
    <div class="col-xs-10"> 
     <br/> 
     <table data-toggle="table" data-striped="true"> 
      <thead> 
      <tr> 
       <th>Column 1</th> 
       <th>Column 2</th> 
      </tr> 
      </thead> 
      <tbody> 
      <tr> 
       <td>A</td> 
       <td>B</td> 
      </tr> 
      <tr> 
       <td>C</td> 
       <td>D</td> 
      </tr> 
      <tr> 
       <td>E</td> 
       <td>F</td> 
      </tr> 
      </tbody> 
     </table> 
    </div>  
    <div class="col-xs-1"></div> 
</row> 

http://jsfiddle.net/sba7wkvb/1/

Quali stili CSS devono essere sovrascritto per rimuovere tutti i confini?

Answer 1

In questo caso è necessario impostare il confine sotto la tabella e le frontiere intorno - tavolo heade r, dati della tabella, contenitore da tavolo tutto a 0px in ordine per eliminare completamente tutti i confini.

.table { 
 
    border-bottom:0px !important; 
 
} 
 
.table th, .table td { 
 
    border: 1px !important; 
 
} 
 
.fixed-table-container { 
 
    border:0px !important; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css" rel="stylesheet"/> 
 

 
<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.4/js/bootstrap.min.js"></script> 
 
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script> 
 

 
<div class="row"> 
 
    <div class="col-xs-1"></div> 
 
    <div class="col-xs-10"> 
 
     <br/> 
 
     <table data-toggle="table" data-striped="true"> 
 
      <thead> 
 
      <tr> 
 
       <th>Column 1</th> 
 
       <th>Column 2</th> 
 
      </tr> 
 
      </thead> 
 
      <tbody> 
 
      <tr> 
 
       <td>A</td> 
 
       <td>B</td> 
 
      </tr> 
 
      <tr> 
 
       <td>C</td> 
 
       <td>D</td> 
 
      </tr> 
 
      <tr> 
 
       <td>E</td> 
 
       <td>F</td> 
 
      </tr> 
 
      </tbody> 
 
     </table> 
 
    </div>  
 
    <div class="col-xs-1"></div>

Answer 2

è possibile impostare l'opzione classi per tavolo da ping-no-delimitato, ad esempio: http://issues.wenzhixin.net.cn/bootstrap-table/#options/no-bordered.html.

Edit: questa funzione è supportata solo a sviluppare la versione (dopo v1.7.0): https://github.com/wenzhixin/bootstrap-table/tree/master/src.

Answer 3

Modifica della dimensione border nel CSS per il .fixed-table-container

CSS:

.table th, .table td { 
    border-top: none !important; 
    border-left: none !important; 
} 
.fixed-table-container { 
    border:0px; 
} 

http://jsfiddle.net/sba7wkvb/3/

Answer 4

È necessario impostare border: none !important;-.fixed-table-containere.table. Impostare anche border-bottom: none !important; sulla prima regola, .table th, .table td.
Aggiornato Fiddle: http://jsfiddle.net/sba7wkvb/5/

Answer 5

Prova questo:

.table th, .table td { 
    border-top: none !important; 
    border-left: none !important; 
} 
.fixed-table-container { 
    border:0px; 
} 
.table th { 
    border-bottom: none !important; 
} 
.table:last-child{ 
    border:none !important; 
} 

Demo JSFiddle

Answer 6

per rimuovere bordo esterno è necessario rimuovere confine da .fixed-table-container come segue:

.fixed-table-container{border: 0px;} 

Answer 7

E 'semplice, Gentilmente aggiungere il codice qui sotto nel tuo foglio CSS. Rimuoverà tutti i bordi in th E Tabella

.table th, .table td, .table { 
    border-top: none !important; 
    border-left: none !important; 
    border-bottom: none !important; 
} 
.fixed-table-container { 
    border:0px; 
    border-bottom: none !important; 
} 

Speranza ha aiutato.

Answer 8

Se si utilizza CSS3 questo vi aiuterà a:

.table tbody tr td, .table tbody tr th { 
    border: none; 
}