How to remove border in bootstrap 3.0?

Question

I need help, my css override for my table-bordered table seems not working. I'm trying to create a table something like this:

<table class="table table-bordered">
    <tbody>
        <tr>
            <td>Collection 1</td>
            <td>5</td>
        </tr>
        <tr>
            <td>Collection 2</td>
            <td>5</td>
        </tr>
        <tr>
            <td colspan="2" class="no-line">-----------</td>
        </tr>
        <tr>
            <td>Total </td>
            <td>10</td>
        </tr>
    </tbody>
</table>

In the css, I tried all possible combinations just to check which will work but still it does not remove the border.

.table-bordered > tbody > tr > td.no-line {
border:none !important;
border-right: none !important;
border-left: none !important;
border-top: none !important;
border-right-style: none !important;
border-left-style: none !important;
}

Please help, Thanks a lot! :)

its simple just add class table-bordered{border:0px;} or table-bordered{border:none;} any of them you can use. — Muhammad Hamza Nisar, Apr 27 '16 at 05:14

score 8 · Answer 1 · answered Apr 27 '16 at 04:53

8

Its actually removing the border. The border that you still see is the table border. Check this fiddle with your original code

Once you remove the table border

.table-bordered{
  border:none;
}

The borders will be gone. Check this fiddle

answered Apr 27 '16 at 04:53

Polynomial Proton

5,020
20
37

1

Wow! this worked. I've figured that it was the table's border but I was hesitant to add border:none to .table-bordered because I taught it will affect the whole table. I'm still a newbie and I learned something new today. Thank you very much! – user1899646 Apr 27 '16 at 05:05
Technically, it does remove the whole table border, but it doesn't matter since the row borders are still there, hence you'll never notice if table border exists unless they are different in color and size. – Polynomial Proton Apr 27 '16 at 05:09
Btw, what is the appropriate property for bootstrap to remove borders? Is it border:none or border-top: none ? – user1899646 Apr 27 '16 at 05:10
`border:none` works. Also, Its just regular css, there nothing different here. All that matters is [css order of precedence](http://stackoverflow.com/questions/25105736/what-is-the-order-of-precedence-for-css) – Polynomial Proton Apr 27 '16 at 05:12
I understand, thank you very much for sharing and taking time to help. – user1899646 Apr 27 '16 at 05:17

Dixit · Answer 2 · 2016-04-27T05:23:08.047

4

For a specific remove border

<table class="table table-bordered">
    <tbody>
        <tr>
            <td >Collection 1</td>
            <td>5</td>
        </tr>
        <tr>
            <td class="noborder">Collection 2</td>
            <td>5</td>
        </tr>
        <tr>
            <td colspan="2" class="no-line">-----------</td>
        </tr>
        <tr>
            <td>Total </td>
            <td>10</td>
        </tr>
    </tbody>
</table>


<style>

.noborder{
      border: none!important;
}
</style>

edited Apr 27 '16 at 05:23

answered Apr 27 '16 at 04:55

Dixit

1,359
3
18
39

Hi dkc007, thanks for the reply. Will this work for a specific element only? I don't want the whole table to have no borders. – user1899646 Apr 27 '16 at 04:59

score 3 · Answer 3 · edited Apr 27 '16 at 05:41

If you are using bootstrap, no need to create custom css or modify the exists css use CDN

   
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
      integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<table class="table table-bordered">
  <tbody>
    <tr>
        <td>Collection 1</td>
        <td>5</td>
    </tr>
    <tr>
        <td>Collection 2</td>
        <td>5</td>
    </tr>
    <tr>
        <td colspan="2" class="no-line">-----------</td>
    </tr>
    <tr>
        <td>Total </td>
        <td>10</td>
    </tr>
  </tbody>
</table>

score 0 · Answer 4 · answered Apr 27 '16 at 05:04

see this

.table-bordered, .table-bordered > tbody > tr > td {
border:none !important;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<table class="table table-bordered">
    <tbody>
        <tr>
            <td>Collection 1</td>
            <td>5</td>
        </tr>
        <tr>
            <td>Collection 2</td>
            <td>5</td>
        </tr>
        <tr>
            <td colspan="2" class="no-line">-----------</td>
        </tr>
        <tr>
            <td>Total </td>
            <td>10</td>
        </tr>
    </tbody>
</table>

How to remove border in bootstrap 3.0?

4 Answers4