Categories: BOOTSTRAP

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.

Row Table Type Specific CSS Class Try it Editor
1 Striped rows .table-striped Try it now
2 Bordered table .table-bordered Try it now
3 Table with hover rows .table-hover Try it now
4 Condensed table .table-condensed Try it now
5 Responsive tables .table-responsive Try it now

Note : If you are looking to color individual cells specifically or rows to improve your UI behaviour, all contextual classes are available i.e add appropriate classes to the design as required i.e. <tr class=”success”>, <td class=”active”>, <td class=”danger”>, <td class=”info”>.

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.

Row Default color New color Try it Editor
Bootstrap 3 change table Background color Transparent lightgrey Try it now
Bootstrap 3 change table Header background Color Transparent red Try it now
Bootstrap 3 change table row background Color Transparent Green Try it now
Bootstrap 3 Change table border Color #ddd Black Try it now
Bootstrap 3 Change table Hover Color Try it now
bootstrap 3 Table striped Change Color grey red Try it now
Bootstrap 3 table cell Color Transparent Contextual Color Try it now

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} 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


admin

Recent Posts

Modern Toys, Magical Moments: Why the Best Toy Shop in Noida Is More Than Just a Store

When it comes to children, there’s one universal truth: the right toy can spark imagination, build skills, and make memories…

1 week ago

Rediscovering Joy: A New Era of Creativity & Comfort in Toy Stores

In today’s digital age, where screens and gadgets dominate our children’s lives, there’s something heartwarming about a well-loved plush toy…

1 week ago

Unboxing Imagination: Discovering the Joy of Play at a Toy Store in Noida

In a world dominated by screens and fast-paced routines, it’s easy to forget the simple magic of a toy in…

2 weeks ago

Imagination Unboxed: Discover Joy at the Toy Shop in Delhi

In the heart of Delhi’s vibrant streets lies a world where imagination meets innovation — the magical universe of toys.…

2 weeks ago

Play with Purpose: Discovering the Ultimate Toy Store in Noida

When was the last time a toy truly amazed you—not just as a product, but as a thoughtful tool for…

2 weeks ago

From Tears to Toys: Exploring Modern Childhood through Delhi’s Favorite Toy Shop

In the digital age, the way we experience childhood has changed, but the essence remains the same—imagination, exploration, and joy.…

2 weeks ago