Menu
How do I make the background change of a table row in Bootstrap 3 on hover. The table class I am using right now is table table-striped. I tried to add a extra class to the <tr> tags within the table and made the css like this .table-row:hover{background:black;}. Now only the non-striped rows are working. Isn't there a class in bootstrap that will allow me to easily implement this? Or should I use JQuery to fix this? I really cannot figure this one out by myself.
424
BootstrapWeb DevelopmentCSS Framework. Using the . table-hover class, a light gray background will be added to rows while the cursor hovers over them.
.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.
You can just wrap your <table> tag inside of <div class="table-responsive"></div> since you're using bootstrap. Just like this: (use <table> instead of grid system (e.g. col-xs-1 etc.)) .. That's it!
Instead put style on the div with class panel-body as overflow-y:scroll; height:200px; see demo below in answers.
You need to add the table-hover class to the <table/> element. Like this:
<table class="table table-striped table-hover"> <tbody> <tr> <td>Col 1</td> <td>Col 2 </td> </tr> </tbody> </table> Source: Documentation
164
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
