## 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 …
…
…
…
… … … … … …