PUBLISHED ON: JUNE 10, 2021
How to make a whole row in a table clickable as a link?
Tables are used for constructing calendars, comparisons of any data, date pickers, etc. Bootstrap provides an easy way to customize the tables using various classes.
Making Table Row Clickable
So now the question is how we can make this table's row clickable as a link. The first solution that may come to our mind is to wrap the contents of <td> within <a> tag. But it will have no effect on the table row nor the table row will be able to make it clickable.
To make the row clickable, we need to add a .clickable class to <tr> tag. Further add the URL address to attribute onclick="window.location='type URL address' " within .clickable class.
Here is an example to make a table row clickable using the above class.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2> Table Creation</h2>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Website Name</th>
<th scope="col">Address</th>
</tr>
</thead>
<tbody>
<tr class="clickable "
onclick="window.location='https://www.studytonight.com/'">
<th scope="row">Clickable row</th>
<td>Study Tonight</td>
<td>www.studytonight.com</td>
</tr>
<tr>
<th scope="row">2</th>
<td>facebook</td>
<td>www.facebook.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Output
Here is the output of the above program.
Using <a> tag inside <td>
One more way to make the whole row clickable is to add an <a> inside every <td> element. Along with it add hover to the row which we want to make clickable and use display: block property to anchor to make the whole row clickable.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
<style>
tr:hover {
background: grey;
}
td a {
display: block;
}
</style>
</head>
<body>
<div class="container">
<h2> Table Creation</h2>
<table class="table">
<thead>
<tr >
<th scope="col">#</th>
<th scope="col">Website Name</th>
<th scope="col">Address</th>
</tr>
</thead>
<tbody>
<tr >
<th scope="row">1</th>
<td><a href="www.studytonight.com">Study Tonight</a></td>
<td><a href="www.studytonight.com">www.studytonight.com</a></td>
</tr>
<tr>
<th scope="row">2</th>
<td>facebook</td>
<td>www.facebook.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Output
Here is the output of the above program.
Conclusion
So we can easily make the table row clickable as a link using bootstrap. You can include Javascript to do so or it can be done without using Javascript by adding anchor to each <td> element.
