CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3bootstrap-table
ytterrr
ytterrr

Reputation: 3246

Bootstrap table. How to remove all borders from table?

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?

Upvotes: 16

Views: 69794

Answers (11)

Sameera Karunanayake
Sameera Karunanayake

Reputation: 49

If you are using bootstrap this will help you:

<table class="table table-borderless">

Upvotes: 4

pabloferraz
pabloferraz

Reputation: 2166

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

Upvotes: 3

Shuhad zaman
Shuhad zaman

Reputation: 3390

html

<table class="table noborder">

css

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

Upvotes: 2

shyam
shyam

Reputation: 606

If you are using CSS3 this will help you:

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

Upvotes: 0

loyola
loyola

Reputation: 4062

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.

Upvotes: 0

Ashesh
Ashesh

Reputation: 3589

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>

Upvotes: 24

fateme
fateme

Reputation: 79

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

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

Upvotes: 1

Ferrmolina
Ferrmolina

Reputation: 2771

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

Upvotes: 3

Rafael Almeida
Rafael Almeida

Reputation: 687

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/

Upvotes: 0

user2314737
user2314737

Reputation: 29317

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/

Upvotes: 2

wenyi
wenyi

Reputation: 1384

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.

Upvotes: 4

Related Questions