JQueryThickBox.com

Bootstrap Tables Nested

Introduction

Tables are available in most programs (web, desktop or mobile application) and they are a main component in showing information to the end user. The HTML tables are actually used to present info in framework method like columns and rows . With using Bootstrap 4 framework you are able to easily enhance the appeal of the table.

In the present day, with the significance that the user interface has, knowing the way to increase the appearance of a Bootstrap table comes to be as relevant as it is. In this case, one of the systems that have become reference is Bootstrap. This front-end framework, within many other features , delivers a variety of features for styling and optimising the display of various components, such as tables.

Standard table in Bootstrap

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

<table>
tag, and certain graphical formatting will just be applied , as shown on the screenshot .

Bootstrap  classic table

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

Some of the new tables in Bootsrap 4 is the inverse tables. Class

.table-inverse
is able to transform the colouring of the table.

Bootstrap inverse 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>

Extra classes

For tables there are also some classes that allow you to add a variety of styles to a table ( click this), they are:

table-striped
Toggles the colour of table rows;

table-bordered
Adds border to table;

table-hover
Activates the highlight of a Bootstrap Table Design line when we hover the mouse cursor over it;

table-condensed
Decreases the height of table rows, helping make it more compact.

To add these designs, just add in the wanted classes to the: <table>: <table class="table table-striped table-bordered table-condensed table-hover">

Table head features

Much like default and inverse tables, run one of two modifier classes to make

<thead>
appear light or dark gray.

Table head options
<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 put in with the

.table-striped
class, an good example

Bootstrap striped rows
<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 side effect in the rows of your table provide the

.table-hover
class ( find out more):

Bootstrap hover rows
<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 provide the borders on every single table slide and a cell using the

.table-bordered
class:

Bootstrap bordered table
<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>

Short Table

In case that you would like to make your table more compact - then you have the ability to cut cell padding in half using this class:

.table-condensed
.

Bear in mind that, while Bootstrap 4 uses

.table-sm
to condense a table, Bootstrap 3 uses
.table-condensed
. Each cut cell padding in half.

Bootstrap condensed table
<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 Table Css

Use the contextual classes to color a table cells (

<td>
) and table rows (
<tr>
):

Bootstrap contextual classes
<!-- 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 doesn't make use of the

.table-
prefix for its contextual classes. Bootstrap 3 uses
.active
while Bootstrap 4 uses
.table-active
. Other than that, both of these versions use the same 5 contextual keywords (active, success, info, warning, danger). Listed below you are able to inspect the explanation of each and every one possible option:

● active: Applies the focus colour to the table row or table cell

● success: Signifies a positive or successful action

● info: Indicates a neutral information change or action

● warning: Displays a notice that you may need attention

● danger: Signifies a potentially negative or dangerous action

Responsive Tables

To create a responsive table - use the

.table-responsive
class. Table scrolls in the horizontal position on devices that less than 768px. If the gadget is larger than 768px wide, then you will see no difference :

Bootstrap responsive tables

Bootstrap 4 allows you to add the

.table-responsive
class to the actual <table> element. Bootstrap 3 tables required that you add that class to a parent <div> element.

Review a number of online video tutorials relating to Bootstrap 4 tables

Related topics:

Bootstrap Table Class

__

W3schools:Bootstrap table tutorial

Bootstrap table  training

Bootstrap Tables Lecture

Bootstrap Tables Lecture