Basic Tables

Using the most basic table markup, here’s how .table-based tables look in Bootstrap. All table styles are inherited in Bootstrap 4, meaning any nested tables will be styled in the same manner as the parent.

Bootstrap Tables Structure

<table class="table">
    <thead>
    <tr>
        <th>#</th>
        <th>Username</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th scope="row">1</th>
        <td>Mark</td>
    </tr>
    <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
    </tr>
    </tbody>
</table>
Bootstrap Tables Options Class Description
Inverse table .table-inverse You can also invert the colors—with light text on dark backgrounds using this class.
Table head options .thead-[default/inverse] Similar to default and inverse tables, use one of two modifier classes to make <thead>s appear light or dark gray.
Table head options with primary background .bg-* Use this class to make custom heading background to thead. You can also use Stack Admin color palette classes for background.
Striped rows .table-striped Use this class to add zebra-striping to any table row within the <tbody>.
Bordered table .table-bordered Use this class for borders on all sides of the table and cells.
Bordered striped .table-striped.table-bordered Use this class to add zebra-striping to any table row within the <tbody>.
Hoverable rows .table-hover Use this class to enable a hover state on table rows within a <tbody>.
Contextual classes .table-[active/*] Use contextual classes to color table rows or individual cells. You can use color options from THEME_COLOR
Responsive tables .table-responsive Use this class to create responsive tables by wrapping any .table to make them scroll horizontally on small devices.

Table Sizing

Tables sizing examples like default & small.

Tables Sizing Options Class Description
Default table .table Use this class to the .table to create a table with default spacing. Default table all rows have 0.75rem height.
Small table .table-sm Use this class to the .table to create a table with small spacing. Small table all rows have 0.6rem height.

Refer following link for udage:

Type URL
Bootstrap Link https://getbootstrap.com/docs/4.0/content/tables/
Template Page https://demos.pixinvent.com/apex-angular-admin-template/demo-1/tables/basic