## Tables

Basic Table

In order to achieve the basic styling example add the base class .table to any <table> element.

Example

<table class="table">
  ...
</table>

Table Head

You can define separate header section in your table structure.
This is example

<table class="table">
    <thead class=theat-dark>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Bob</td>
      <td>Robo</td>
      <td>@bro</td>
    </tr>
  </tbody>
</table>

Table Striped

In order to achieve the striped row effect (zebra-striping) in tables use .table-striped in addition to .table on any <table> element. Striped tables are styled via the :nth-child CSS selector, which is not available in Internet Explorer 8.

<table class="table table-striped">
  ...
</table>

Table Bordered

In order to achieve the bordered table use .table-bordered in addition to .table on any <table> element.

<table class="table table-bordered">
  ...
</table>

Table Hover

In order to achieve the hover row effect on tables, use .table-hover in addition to .table on any <table> element.

<table class="table table-hover">
  ...
</table>

Table Condensed

In order to achieve the condensed table use .table-condensed in addition to .table on any <table> element.

<table class="table table-condensed">
  ...
</table>

Table Responsive

In order to achieve the responsive table by wrapping any .table table in a .table-responsive element. …

Developers are able to change the style of each individual row <tr> and/or cell <td> by using contextual classes.

.active – Applies the hover color to a particular row or cell
.success – Indicates a successful or positive action
.info – Indicates a neutral informative change or action
.warning – Indicates a warning that might need attention
.danger – Indicates a dangerous or potentially negative action …
…
…
…
… … … … … …

More Information

Bootstrap Tables