html - Bootstrap table without stripe / borders

Question

I'm kinda stuck with a CSS problem while using Bootstrap. I'm also using Angular JS with Angular UI.bootstrap (which might be part of the problem).

I'm making a website that displays data in a table. Sometime, the data contains object that I have to display in tables. So I want to put borderless tables inside a normal table while keeping inside separation lines for the borderless tables.

But it seems that even if I specifically say to not show the borders on a table, it is forced:

HTML:

<table class='table borderless'>

CSS:

.borderless table {
    border-top-style: none;
    border-left-style: none;
    border-right-style: none;
    border-bottom-style: none;
}

So here, what I want is just the inside borders.

Answer 1

Using Bootstrap 3.2.0 I had problem with Brett Henderson solution (borders were always there), so I improved it:

HTML

<table class="table table-borderless">

CSS

.table-borderless > tbody > tr > td,
.table-borderless > tbody > tr > th,
.table-borderless > tfoot > tr > td,
.table-borderless > tfoot > tr > th,
.table-borderless > thead > tr > td,
.table-borderless > thead > tr > th {
    border: none;
}