3.3 KiB
| title |
|---|
| Tables |
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-bordered 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 and/or cell 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
