over 8 years ago
In Bootstrap table has a little padding and horizontal dividers. These tables are very clean and padding value is 8px with 1.4 line-height and vertical-align is top.
To make a table within bootstrap you have to add .table class and this is called Basic table.
<table class = "table"><thead><tr><th>City</th><th>Pincode</th></tr></thead><tbody><tr><td>Dhradun</td><td>248001</td></tr></tbody></table>
<table class = "table">
<thead>
<tr>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dhradun</td>
<td>248001</td>
</tr>
</tbody>
</table>With the basic table here is few more table classes in bootstrap
Striped table -
To use it you need to add a .table-striped class with .table class. This shows your table row in 2 different color means some even number of table row will white and odd number row will light gray color.
<table class = "table table-striped"><thead><tr><th>City</th><th>Pincode</th></tr></thead><tbody><tr><td>Bangalore</td><td>560001</td></tr><tr><td>Mumbai</td><td>400003</td></tr></tbody></table>
<table class = "table table-striped">
<thead>
<tr>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Mumbai</td>
<td>400003</td>
</tr>
</tbody>
</table>
Bordered table -
By adding a .table-bordered class with .table class, In your table column get a border vertically border.
<table class = "table table-bordered"><thead><tr><th>City</th><th>Pincode</th></tr></thead><tbody><tr><td>Bangalore</td><td>560001</td></tr><tr><td>Mumbai</td><td>400003</td></tr></tbody></table>
<table class = "table table-bordered">
<thead>
<tr>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Mumbai</td>
<td>400003</td>
</tr>
</tbody>
</table>
Hover Table -
Using .table-hover class you will get cursor hovers pointer) on each row with gray background color on hover.
<table class = "table table-hover"><thead><tr><th>City</th><th>Pincode</th></tr></thead><tbody><tr><td>Bangalore</td><td>560001</td></tr><tr><td>Mumbai</td><td>400003</td></tr></tbody></table>
<table class = "table table-hover">
<thead>
<tr>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Mumbai</td>
<td>400003</td>
</tr>
</tbody>
</table>
Responsive Table -
If you want to make your table responsive, for it you need to wrap the table in .table-responsive named class div. This will make a horizontal scroll under 768px view port.
<div class = "table-responsive"><table class = "table table-hover"><thead><tr><th>City</th><th>Pincode</th></tr></thead><tbody><tr><td>Bangalore</td><td>560001</td></tr><tr><td>Mumbai</td><td>400003</td></tr></tbody></table></div>
<div class = "table-responsive">
<table class = "table table-hover">
<thead>
<tr>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Mumbai</td>
<td>400003</td>
</tr>
</tbody>
</table>
</div>
0 Comment(s)