Bootstrap tutorial

How to style tables

css class description
table Provides base styles for table. Apply it to the <table> element.
table-dark Inverts the colors: light text on dark backgrounds.
table-striped Adds zebra-striping to any table row within the <tbody>.
table-bordered Adds borders on all sides of the table and cells.
table-hover Enables a hover state on table rows within a <tbody>.
table-responsive{-sm|-md|-lg|-xl} Allows tables to be scrolled horizontally. Used with table class.
table-sm Make tables more compact by cutting cell padding in half.
thead-light Makes <thead>s appear light.
thead-dark Makes <thead>s appear dark.

table color

Bootstrap provides the table colors. You can apply these classes to the <table> <tr> and <td> elements.

The table colors are different from the background colors, although they have the same names.

Code example
<tr class="table-active">
<tr class="table-primary">
<tr class="table-secondary">
<tr class="table-success">
<tr class="table-danger">
<tr class="table-warning">
<tr class="table-info">
<tr class="table-light">
<tr class="table-dark">

striping

Since v5 stripping works for any color applied to the table.

Code example
name description
aa description
bb description
cc description

The table-striped class useful for the static tables. If you plan on dynamically hiding/showing rows, then you must provide striping manually.

// call this function after showing/hiding rows
function stripedTableBS4(idTable){
    $(idTable).removeClass('table-striped');
    $(idTable+' tr:visible').each(function (index) {
        $(this).css('background-color', 
            !!(index & 1)? 'rgba(0,0,0,0)' : 'rgba(0,0,0,.05)');
    });  
}