Tables – Bootstrap


## 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>
Basic 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>
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>
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>
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>
Condensed Table

Table Responsive

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

Responsive Table

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 …



    … … … … … …
Contextual Class Table

More Information

This article needs improvement. You can help improve this article. You can also write similar articles and help the community.