Bootstrap 5 Table Hoverable Rows can be used to apply a hover state on table rows within a <tbody>. It helps to focus on the individual row.
Table Hoverable Rows used Class:
- table-hover: This class is used to enable a hover state feature on table rows within a <tbody>.
Syntax:
<table class="table table-hover">
...
</table>
Example 1: In this example, we will learn about table-hover effect.
<!DOCTYPE html>
<html>
<head>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<title>Bootstrap 5 Table Hoverable rows</title>
</head>
<body>
<div class="container">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h2> Table Hoverable rows</h2>
<table class="table table-hover">
<thead>
<tr>
<th>Id</th>
<th>Product</th>
<th>Cost</th>
</tr>
</thead>
<tbody>
<tr>
<td>11</td>
<td>Stapler</td>
<td>45</td>
</tr>
<tr>
<td>21</td>
<td>Punching Machine</td>
<td>60</td>
</tr>
<tr>
<td>31</td>
<td>Fevicol</td>
<td>40</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Output:
Example 2: In this example, we will learn about table hover effect with a dark theme.
<!DOCTYPE html>
<html>
<head>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<title>Bootstrap 5 Table Hoverable rows</title>
</head>
<body>
<div class="container">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h2>
Table Hoverable rows
</h2>
<table class="table table-hover table-dark">
<thead>
<tr>
<th>Id</th>
<th>Product</th>
<th>Cost</th>
</tr>
</thead>
<tbody>
<tr>
<td>11</td>
<td>Stapler</td>
<td>45</td>
</tr>
<tr>
<td>21</td>
<td>Punching Machine</td>
<td>60</td>
</tr>
<tr>
<td>31</td>
<td>Fevicol</td>
<td>40</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Output:
Reference: https://getbootstrap.com/docs/5.0/content/tables/#hoverable-rows