htmlcsstwitter-bootstrap

Bootstrap table without stripe / borders

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.

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