Signup/Sign In

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.

clickable row

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.

clickable row

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.