Boostrap table header background colour classes
<tr class='table-active'>...</tr>
<tr class='table-primary'>...</tr>
<tr class='table-secondary'>...</tr>
<tr class='table-success'>...</tr>
<tr class='table-danger'>...</tr>
<tr class='table-warning'>...</tr>
<tr class='table-info'>...</tr>
<tr class='table-light'>...</tr>
<tr class='table-dark'>...</tr>
Base Class
ID | Name | Class | Mark |
1 | John | Four | 52 |
2 | Alex | Three | 85 |
3 | Rohn | Six | 55 |
<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
ID | Name | Class | Mark |
1 | John | Four | 52 |
2 | Alex | Three | 85 |
3 | Rohn | Six | 55 |
<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
ID | Name | Class | Mark |
1 | John | Four | 52 |
2 | Alex | Three | 85 |
3 | Rohn | Six | 55 |
<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
ID | Name | Class | Mark |
1 | John | Four | 52 |
2 | Alex | Three | 85 |
3 | Rohn | Six | 55 |
<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
ID | Name | Class | Mark |
1 | John | Four | 52 |
2 | Alex | Three | 85 |
3 | Rohn | Six | 55 |
<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
ID | Name | Class | Mark |
1 | Default | Four | 52 |
2 | Active | Four | 52 |
3 | Success | Three | 85 |
4 | Info | Six | 55 |
5 | Warning | Six | 55 |
6 | Danger | Six | 55 |
<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 )
ID | Name | Class | Mark |
1 | John | Four | 52 |
2 | Alex | Three | 85 |
3 | Rohn | Six | 55 |
<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'
ID | Name | Class | Mark |
1 | John | Four | 52 |
2 | Alex | Three | 85 |
3 | Rohn | Six | 55 |
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.
ID | Name | Class | Mark |
1 | John | Four | 52 |
2 | Alex | Three | 85 |
3 | Rohn | Six | 55 |
<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.