Bootstrap table. How to remove all borders from table?

Question

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?

Daffi

Answer 1

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>

Humes

Answer 2

If you are using bootstrap this will help you:

<table class="table table-borderless">

Resultant

Answer 3

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.

Solfeggio

It works but still appear two horizontal border lines - link. – Daffi

Answer 4

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

Sidonie

Answer 5

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

Bengali

Answer 6

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/

Curzon

border-bottom: none !important; removed one border from the rest two. But most bottom still there. – Daffi

Answer 7

html

<table class="table noborder">

css

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

Acknowledge

Answer 8

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

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

Sphalerite

Answer 9

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/

Hellenistic

Answer 10

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.

Fulgurite

Answer 11

If you are using CSS3 this will help you:

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

Unexperienced

Did you mean .table thead tr th for the header – Morril

Yes, This removes all the borders for a table like this: <table class="table"> – Unexperienced