Menu
I haven't seen any examples while searching through google. I've tried making thead float on left and tbody on the right, but it didn't work. How to have a table header on the left side instead of showing it on the top ?
<table class="table"> <thead> <tr> <th>Row</th> <th>First Name</th> <th>Last Name</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>John</td> <td>Carter</td> <td>[email protected]</td> </tr> <tr> <td>2</td> <td>Peter</td> <td>Parker</td> <td>[email protected]</td> </tr> <tr> <td>3</td> <td>John</td> <td>Rambo</td> <td>[email protected]</td> </tr> </tbody> </table> 
463
By adding the ” text-center” class of Bootstrap 3 We can use the “text-center” class of bootstrap 3 for the center-alignment of an element. So in our td when we add “text-center” class, and then our table text goes to the center.
.table-striped. Adds zebra-striping to any table row within <tbody> (not available in IE8) Try it. .table-bordered. Adds border on all sides of the table and cells.
table-condensed is a class in Bootstrap 3 Framework. It can be used when we want to have row padding half so that we can condense the table. So that I can be more user-friendly.
Add .table-borderless for a table without borders.
If you want the headers down the left side of your table, simply write the markup differently
See this demo
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> <table class="table"> <tbody> <tr> <th>Row</th> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <th>First Name</th> <td>John</td> <td>Peter</td> <td>John</td> </tr> <tr> <th>Last Name</th> <td>Carter</td> <td>Parker</td> <td>Rambo</td> </tr> <tr> <th>Email</th> <td>[email protected]</td> <td>[email protected]</td> <td>[email protected]</td> </tr> </tbody> </table>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
