Bootstrap table without stripe / borders

css, html, twitter-bootstrap

Solution

The border styling is set on the `td` elements.

html:

<table class='table borderless'>

css:

.borderless td, .borderless th {
    border: none;
}

Update: Since Bootstrap 4.1 you can use `.table-borderless` to remove the border.

https://getbootstrap.com/docs/4.1/content/tables/#borderless-table

Problem

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.

Original source