css - Bootstrap table. How to remove all borders from table? -
how remove (especially outer ones) borders bootstrap table? here table without inner borders:
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/
which css styles need overriden remove borders?
in case need set border below table , borders around - table header, table data, table container 0px in-order totally rid of borders.
.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>
Comments
Post a Comment