16

How to remove all (especially outer ones) borders from bootstrap table? Here is a 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 to be overriden to remove all borders?

ytterrr
  • 3,036
  • 6
  • 23
  • 32

11 Answers11

24

In this case you need to set the border below the table and the borders around - table header, table data, table container all to 0px in-order to totally get rid of all 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>
Gaurav Aggarwal
  • 9,809
  • 6
  • 36
  • 74
Ashesh
  • 3,499
  • 1
  • 27
  • 44
5

If you are using bootstrap this will help you:

<table class="table table-borderless">
Sameera Karunanayake
  • 51
  • 1
  • 3
4

you can set classes option to table table-no-bordered, example: http://issues.wenzhixin.net.cn/bootstrap-table/#options/no-bordered.html.

Edit: this feature is only supported in develop version(after v1.7.0): https://github.com/wenzhixin/bootstrap-table/tree/master/src.

wenyi
  • 1,384
  • 8
  • 11
  • It works but still appear two horizontal border lines - [link](http://jsfiddle.net/sba7wkvb/2/). – ytterrr Apr 26 '15 at 06:00
3

Try this:

.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

Ferrmolina
  • 2,737
  • 2
  • 30
  • 46
3

Using Bootstrap In html 

<table class="table no-border">

In css

.table.no-border tr td, .table.no-border tr th {
    border-width: 0;
}

Source: https://codepen.io/netsi1964/pen/ogVQqG

pabloferraz
  • 2,006
  • 1
  • 13
  • 7
2

Change the border size in the CSS for the .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/

user2314737
  • 27,088
  • 20
  • 102
  • 114
  • `border-bottom: none !important;` removed one border from the rest two. But most bottom still there. – ytterrr Apr 26 '15 at 06:05
2

html

<table class="table noborder">

css

.noborder td, .noborder th {
    border: none !important;
}
Martin
  • 22,212
  • 11
  • 70
  • 132
Shuhad zaman
  • 3,156
  • 32
  • 32
1

for remove outer border you should remove border from .fixed-table-container as follow :

.fixed-table-container{border: 0px;}
fateme
  • 79
  • 8
0

You need set border: none !important; to .fixed-table-container and .table. Also set border-bottom: none !important; to your first rule, .table th, .table td.
Updated Fiddle: http://jsfiddle.net/sba7wkvb/5/

Rafael Almeida
  • 677
  • 7
  • 21
0

It's simple, Kindly add the below code in your CSS sheet.It will remove all the borders in the table 

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

Hope helped.

loyola
  • 3,905
  • 2
  • 24
  • 18
0

If you are using CSS3 this will help you:

.table tbody tr td, .table tbody tr th {
    border: none;
}
shyam
  • 596
  • 9
  • 18