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