Bootstrap Table Nested

Overview

Tables are present in almost all apps (web, desktop or mobile program) and they are a main element in showing information to the final user. The HTML tables are really used to present info in framework way such as columns and rows . With working with Bootstrap 4 framework you are capable to easily enhance the appeal of the table.

Today, with the importance that the user interface has, knowing precisely how to enhance the look of a Bootstrap table becomes as relevant as it is. In this situation, one of the systems that have become reference is Bootstrap. This front-end framework, within lots of other features , offers a amount of elements for styling and optimizing the presentation of different elements, such as tables.

Standard table in Bootstrap

To format a table through Bootstrap, just simply add in the table class to the

<table>

tag, and certain graphic format will currently be applied , as presented on the screenshot .

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Inverse tables.

Among the fresh tables in Bootsrap 4 is the inverse tables. Class

.table-inverse

can replace the color selection of the table.

<table class="table table-inverse">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Special classes

For tables there are also some classes that make it possible for you to apply a variety of looks to a table ( find out more), they are:

●

table-striped

Toggles the color tone of table rows;

●

table-bordered

Adds border to table;

●

table-hover

Turns on the highlight of a Bootstrap Tables Nested line when we hover the mouse cursor over it;

●

table-condensed

Reduces the height of table rows, making it more compact.

To add all of these looks, just add the desired classes to the: <table>: <table class="table table-striped table-bordered table-condensed table-hover">

Table head options

The same as default and inverse tables, choose one of two modifier classes to make

<thead>

show up light or dark gray.

<table class="table">
  <thead class="thead-inverse">
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table">
  <thead class="thead-default">
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Striped rows

Zebra-like stripes may be incorporated with the

.table-striped

class, an good example

<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Hover Rows

To make a hover effect in the rows of your table include the

.table-hover

class ( additional resources):

<table class="table table-hover">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Bordered Table

You have the ability to bring in the borders on each and every table slide and a cell through the

.table-bordered

class:

<table class="table table-bordered">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@TwBootstrap</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Condensed Table

If you wish to make your table much more compact - then you can easily cut cell padding in half using this class:

.table-condensed

Note that, while Bootstrap 4 uses

.table-sm

to condense a table, Bootstrap 3 uses

.table-condensed

. Both of these cut cell padding in half.

<table class="table table-sm">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Contextual Classes of Bootstrap Tables Example

Use the contextual classes to color a table cells (

<td>

) and table rows (

<tr>

<!-- On rows -->
<tr class="table-active">...</tr>
<tr class="table-success">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="table-active">...</td>
  <td class="table-success">...</td>
  <td class="table-warning">...</td>
  <td class="table-danger">...</td>
  <td class="table-info">...</td>
</tr>

Changing the rows of a table Bootstrap 3 does not make use of the

.table-

prefix for its contextual classes. For good example, Bootstrap 3 uses

.active

whereas Bootstrap 4 uses

.table-active

. Other than that, both of these versions work with the exact same 5 contextual keywords (active, success, info, warning, danger). Shown below you are able to view the information about each one possible type:

● active: Adds the focus color tone to the table row or table cell

● success: Signifies a successful or positive action

● info: Signifies a neutral information change or action

● warning: Displays a warning that you might need attention

● danger: Indicates a potentially negative or dangerous action

Responsive Tables

To create a responsive table - use the

.table-responsive

class. Table rolls in the horizontal course on devices that less than 768px. If the machine is larger sized than 768px wide, then you will see no big difference :