Table disign using Bootstrap

ClassDescription
.tableBase Class
.table-stripedStriped rows ( alternate colors)
.table-borderedBordared rows and cells
.table-hoverHoverable rows
.table-condensedReduced padding of cells
.tableDifferent Background colors for rows & cells
.responsiveresponsive design to Scroll in small screens
.customManage border, thickness & background colour
.inverseStyle with Dark background and white font

Base Class

IDNameClassMark
1JohnFour52
2AlexThree85
3RohnSix55
<table class='table'>
<tr><th>ID</th><th>Name</th><th>Class</th><th>Mark</th></tr>
<tr><td>1</td><td>John</td><td>Four</td><td>52</td></tr>
<tr><td>2</td><td>Alex</td><td>Three</td><td>85</td></tr>
<tr><td>3</td><td>Rohn</td><td>Six</td><td>55</td></tr>
</table>

Striped Rows

IDNameClassMark
1JohnFour52
2AlexThree85
3RohnSix55
<table class='table table-striped'>
<tr><th>ID</th><th>Name</th><th>Class</th><th>Mark</th></tr>
<tr><td>1</td><td>John</td><td>Four</td><td>52</td></tr>
<tr><td>2</td><td>Alex</td><td>Three</td><td>85</td></tr>
<tr><td>3</td><td>Rohn</td><td>Six</td><td>55</td></tr>
</table>

Bordered Table

IDNameClassMark
1JohnFour52
2AlexThree85
3RohnSix55
<table class='table table-bordered'>
<tr><th>ID</th><th>Name</th><th>Class</th><th>Mark</th></tr>
<tr><td>1</td><td>John</td><td>Four</td><td>52</td></tr>
<tr><td>2</td><td>Alex</td><td>Three</td><td>85</td></tr>
<tr><td>3</td><td>Rohn</td><td>Six</td><td>55</td></tr>
</table>

Hoverable table rows

IDNameClassMark
1JohnFour52
2AlexThree85
3RohnSix55
<table class='table table-hover'>
<tr><th>ID</th><th>Name</th><th>Class</th><th>Mark</th></tr>
<tr><td>1</td><td>John</td><td>Four</td><td>52</td></tr>
<tr><td>2</td><td>Alex</td><td>Three</td><td>85</td></tr>
<tr><td>3</td><td>Rohn</td><td>Six</td><td>55</td></tr>
</table>

Small Table : Half cell padding

IDNameClassMark
1JohnFour52
2AlexThree85
3RohnSix55
<table class='table table-condensed'>
<tr><th>ID</th><th>Name</th><th>Class</th><th>Mark</th></tr>
<tr><td>1</td><td>John</td><td>Four</td><td>52</td></tr>
<tr><td>2</td><td>Alex</td><td>Three</td><td>85</td></tr>
<tr><td>3</td><td>Rohn</td><td>Six</td><td>55</td></tr>
</table>

Contextual Class to Color rows or cells

IDNameClassMark
1DefaultFour52
2ActiveFour52
3SuccessThree85
4InfoSix55
5WarningSix55
6DangerSix55
<table class='table'>
<tr><th>ID</th><th>Name</th><th>Class</th><th>Mark</th></tr>
<tr ><td>1</td><td>Default</td><td>Four</td><td>52</td></tr>
<tr class='active'><td>2</td><td>Active</td><td>Four</td><td>52</td></tr>
<tr class='success'><td>3</td><td>Success</td><td>Three</td><td>85</td></tr>
<tr class='info'><td>4</td><td>Info</td><td>Six</td><td>55</td></tr>
<tr class='warning'><td>5</td><td>Warning</td><td>Six</td><td>55</td></tr>
<tr class='danger'><td>6</td><td>Danger</td><td>Six</td><td>55</td></tr>
</table>

Responsive Tables

These tables scroll horizontally on small screen ( under 768px )
IDNameClassMark
1JohnFour52
2AlexThree85
3RohnSix55
<div class='table-responsive'>
<table class='table'>
<tr><th>ID</th><th>Name</th><th>Class</th><th>Mark</th></tr>
<tr><td>1</td><td>John</td><td>Four</td><td>52</td></tr>
<tr><td>2</td><td>Alex</td><td>Three</td><td>85</td></tr>
<tr><td>3</td><td>Rohn</td><td>Six</td><td>55</td></tr>
</table>
</div>

Managing border width, color of table

We can use our own CSS to manage borders, colors, thickness etc.

For this we have created CSS like this. ( You can include in your CSS file )
<style>
.my_table {width:300px;}
 .my_table tr, .my_table  td {
  border: 3px solid;
border-color: red;
}
</style>
We will add Table class like this class='table my_table'
IDNameClassMark
1JohnFour52
2AlexThree85
3RohnSix55
With added font size.
<style>
 .my_table tr, .my_table  td {
  border: 1px solid;
font-size:10px;
}
</style>
<table class='table my_table'>
<tr><td>ID</td><td>Name</td><td>Class</td><td>Mark</td></tr>
<tr><td>1</td><td>John</td><td>Four</td><td>52</td></tr>
<tr><td>2</td><td>Alex</td><td>Three</td><td>85</td></tr>
<tr><td>3</td><td>Rohn</td><td>Six</td><td>55</td></tr>
</table>

Background Colour of row


.my_table {width:300px;}
.my_tr  td {
 background-color: yellow;
}
This style is added to one row here.
IDNameClassMark
1JohnFour52
2AlexThree85
3RohnSix55
<table class='table '>
<tr><td>ID</td><td>Name</td><td>Class</td><td>Mark</td></tr>
<tr><td>1</td><td >John</td><td>Four</td><td>52</td></tr>
<tr class=my_tr><td>2</td><td >Alex</td><td>Three</td><td>85</td></tr>
<tr><td>3</td><td>Rohn</td><td>Six</td><td>55</td></tr>
</table>

Bootstrap 4 inverse table design

Bootstrap 4 has a class inverse which adds dark background and white font colour. This class ( table-inverse ) can be added to our base class table.
Visitors Rating
Your Rating




Google+

Post Comment This is for short comments only. Use the forum for more discussions.







Most Popular JQuery Scripts

1

Two dependant list boxes

2

Calendar with Date Selection

3

Data change by Slider

4

Show & Hide element
HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us
©2000-2018 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer