How to remove <td> 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! :)

Answer 1

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