Bootstrap tutorial

How to style tables

css class description
table Provides base styles for table.
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, that usually are used with the <table>, <tr>, <td> elements.



<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">

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

Table colors do not work with dark tables, but background colors can be used instead.

striping

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)');
    });  
}