Bootstrap table without stripe / borders

Crafting a borderless table

Let's strip your tables to the basics, removing all stripes and borders:

Clean look: no border

Bootstrap's .table-borderless class paired with a wee bit of CSS can make your table shine, or rather, not shine:

<table class="table table-borderless">
  <!-- table content -->
</table>


/* Poof! Borders gone! */
.borderless td, .borderless th {
  border: none;
}


Inside border visibility: remove outer borders

Ever wanted strips without the stripes? Keep inner borders, ditch outer ones using CSS selectors:

/* Like nachos without cheese. Still nachos, but are they? */
.table-borderless > tbody > tr > td,
.table-borderless > tbody > tr > th {
  border-bottom-width: 0;
}


Horizontal dividers: the .table class excluded

If sideways is how you roll, embrace horizontal dividers:

<table class="borderless">
  <!-- table content -->
</table>


Angular and table styles

If you're dabbling in Angular, ensure your styles don't play hide-and-seek:

<!-- Give the table a unique class -->
<table class="my-borderless-table">
  <!-- table content -->
</table>


/* Angular components like to be unique */
:host ::ng-deep .my-borderless-table td,
:host ::ng-deep .my-borderless-table th {
  border: none;
}


Just as a heads up: nested tables, much like nested dolls, can get complicated quickly and can cause unexpected style issues.

Selector specificity and style consistency

CSS selector specificity

Your journey to CSS specificity starts here. When rules collide, this decides the winner:

/* Target cells in table body, not table-head cells holding a grudge. */
.table-borderless > tbody > tr > td


Choose to use direct child selectors (>) carefully, like having ketchup with your fries, but never with your pasta.

Style consistency: uniformity wins

Ensure your styles march out in perfect formation:

/* Uniform like a bedroom after Marie Kondo paid a visit */
.table-borderless > *, .table-borderless > * > * {
  border: none;
}


With these steps, your table's style would be as consistent as your coffee order (Monday: black, Tuesday: black...)