Bootstrap 3 Tables example

Whenever you need the large data to represent in statistic form than tables are the best way to represent them. Bootstrap provides complete default classes for tables in all possible manner with specific CSS classes for multiple use. Here we have compiled general info on Bootstrap table with suitable examples:

How to Design tables in Bootstrap 3?

They follow the structure of HTML tags only but with specific bootstrap class. It depends on how you want to let the user view your table with more appeal and better he or she can understand the point.

• First of all you start with <table> tag and add specific classes
• Then <thead> and add your main headings within <th> tag in the <tr> rows respectively.
• Than main data in the <tr> with <td> for showing data in regular manners
• You can give individual classes, colors to rows, cells and heading as design required

Bootstrap Table CSS

Here we have precisely shortlisted some of the key CSS attributes for Bootstrap Table.

//Default Table CSS
.table{width:100%;max-width:100%;margin-bottom:20px;}
table{background-color:transparent;}
table{border-spacing:0;border-collapse:collapse;}
thead{display:table-header-group}
.table>thead>tr>th{vertical-align:bottom;border-bottom:2px solid #ddd;}
.table>thead>tr>th,.table>tbody>tr>th,.table>tfoot>tr>th,.table>thead>tr>td,.table > tbody > tr > td,.table > tfoot > tr > td {
padding:8px;line-height: 1.42857143;  vertical-align: top;  border-top: 1px solid #ddd;}

Default Table Layout in Bootstrap 3

Below given html structure is the default structure for Bootstrap table.

<div class="container">
    <table class="table">
<thead><tr><th>Row</th><th>Table Type</th><th>Specific CSS Class</th><th>Try it Editor</th></tr></thead>
<tbody>
<tr><td>1</td><td>Striped rows</td><td>.table-striped</td><td>Try it now</td></tr>
<tr><td>2</td><td>Bordered table</td><td>.table-bordered</td><td>Try it now</td></tr>
<tr><td>3</td><td>Table with hover rows</td><td>.table-hover</td><td>Try it now</td></tr>
<tr><td>4</td><td>Condensed table</td><td>.table-condensed</td><td>Try it now</td></tr>
<tr><td>5</td><td>Responsive tables</td><td>.table-responsive</td><td>Try it now</td></tr>          
</tbody>
</table>
</div>

Bootstrap 3 Table Styles

Check out these basic set of table styles that are provided with bootstrap.

Bootstrap 3 Table Color

You can use all contextual colors that are default given in Bootstrap utility classes i.e. active, success, info, warning, danger to get the desired color for table presentation.

Bootstrap 3 Change Table Color

One can assign different Color by changing the respective color of the elements to get the desired results more effectively.

Bootstrap 3 Bordered Table Example

In this you have to specifically use class .table-bordered to get border around all your table cells respectively. This specific class add {border:1px solid #ddd!important} value to the corresponding table that imparts the bordered layout.

Bootstrap 3 Striped Table Example

With Class .table-striped you will get table rows in two different color. With this class you will get every odd color to be have specific color to be stripped pattern.

.table-striped>tbody>tr:nth-of-type(odd){background-color:#f9f9f9}.

Bootstrap 3 Table with hover rows Example

.table-hover class is added to make table rows change color on hover accordingly. It has following default CSS values that gives it bootstrap table hover to the whole table layout.

.table-hover>tbody>tr:hover{background-color:#f5f5f5}

Bootstrap 3 Condensed Table Example

To make condensed table in Bootstrap you need to add .table-condensed specific class to the table structure which will impart the desired behavior.

Bootstrap 3 Responsive Table Example

To make bootstrap table responsive you must add .table-responsive class to the default table structure respectively.

Bootstrap responsive table CSS :

.table-responsive {
  overflow-x: auto;
  min-height: 0.01%;
}
@media screen and (max-width: 767px) {
  .table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #ddd;
  }
}

Bootstrap 3 Table Template

Check out simple Bootstrap Table Template with different features and funcitonalities