Create table with complete row hover effect using Bootstrap classes in HTML,PHP

How to set row and column hover effects on table using .table-hover class.

In this tutorial we are simply creating a table with table heading, tables rows values and table column values. Now we are adding .table and .table-hover classes on table tags which makes the table fully responsive also implement the hover effects, So when user take the cursor upon table elements then it will show hover effect on only that below row and its whole columns. So here is the complete step by step tutorial for Create table with complete row hover effect using Bootstrap classes in HTML,PHP.

How to Create table with complete row hover effect using Bootstrap classes in HTML,PHP.

https://www.android-examples.com/demo/heading-tag.html
Code for table-with-hover.html file.

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Table with Hover</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

<h1>Table with Hover</h1>


<table class="table table-hover">
 <thead>
 <tr>
 <th>Name</th>
 <th>Website</th>
 <th>Email</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>Raju</td>
 <td>Raju-demo-website.com</td>
 <td>[email protected]</td>
 </tr>
 <tr>
 <td>Raja</td>
 <td>Raja-demo.com</td>
 <td>[email protected]</td>
 </tr>
 <tr>
 <td>Rani</td>
 <td>Rani-demo.com</td>
 <td>[email protected]</td>
 </tr>
 </tbody>
 </table>

 
</div>
</body>
</html>

Screenshot:

Create table with complete row hover effect using Bootstrap classes in HTML,PHP

Leave a Reply

Your email address will not be published. Required fields are marked *