Tabela Bootstrap. Jak usunąć wszystkie granice ze stołu?

Question

Jak usunąć wszystkie (szczególnie zewnętrzne) granice z bootstrap table? Oto tabela bez granic wewnętrznych:

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/

Które style CSS muszą zostać nadpisane, aby usunąć wszelkie granice?

Answer 1

W tym przypadku trzeba ustawić granicę pod tabelą i granic okolice - tabela heade r, dane tabeli, pojemnik na stół wszystko na 0px, aby całkowicie pozbyć się wszystkich granic.

.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

można ustawić opcję klas do tabeli bez ograniczników, przykład: http://issues.wenzhixin.net.cn/bootstrap-table/#options/no-bordered.html.

Edytuj: ta funkcja jest obsługiwana tylko w wersji rozwijanej (po wersji 1.7.0): https://github.com/wenzhixin/bootstrap-table/tree/master/src.

Answer 3

Zmień rozmiar border w CSS dla .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

W przeglądarce musi być ustawiony border: none !important; do .fixed-table-containeri.table. Ustaw także border-bottom: none !important; na pierwszą regułę, .table th, .table td.
Updated Fiddle: http://jsfiddle.net/sba7wkvb/5/

Answer 5

Spróbuj tego:

.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

do usunięcia granicę zewnętrzną należy usunąć obramowanie z .fixed-table-container następująco:

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

Answer 7

To proste, uprzejmie dodaje poniższy kod w arkuszu CSS. Usunie wszystkie granice w th e stół

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

Nadzieja pomogła.

Answer 8

Jeśli używasz CSS3 to pomoże:

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