Open In App

How to make whole row in a table clickable as link in Bootstrap ?

Improve
Improve
Like Article
Like
Save
Share
Report

Tables in Bootstrap can be formed either using traditional <table> tags or using the in-built ‘grid’ system. Earlier, <table> tags were often employed to designing grids for the sites, but nowadays with flexbox and table display properties in CSS, it is easier to just use divs. In the following examples, we’ll see how to make a complete row clickable as a link for both cases.

Tradition <table> Tag: Now to make the entire row as clickable, one may think of wrapping the content of <tr> tag into a link (<a>) element. But that would result in nothing. Actually, it’s an invalid HTML approach and should be avoided.

We can call onclick event on <tr> tag and then navigate to whatever location as per the requirements. Here’s an example explaining how to do so.

 

 

In this case, the markup for an example table looks like this:

<table>
  <tr>
    <th>IDE</th>
    <th>Link</th>
  </tr>
  <tr onclick="window.location='...'">
    <td>GeeksforGeeks</td>
    <td>https://ide.geeksforgeeks.org/Y4U8qx</td>
  </tr>
</table&gt

Example:1




<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1,
                   shrink-to-fit=no">
    <script src=
    </script>
    <script src=
    </script>
    <link rel="stylesheet"
          href=
  
    <title>Table Row Clickable</title>
  
    <style>
        th {
            background: green;
            border: 2px solid black;
        }
          
        .clickable {
            height: 50px;
            background: gray;
            border: 2px solid black;
        }
          
        .clickable:hover {
            background: green;
        }
    </style>
</head>
  
<body>
    <h1 style="color:green;text-align:center;">GeeksforGeeks</h1>
  
    <div class="container">
        <table class="w-100">
            <tr class="text-center">
                <th>IDE</th>
                <th>link</th>
            </tr>
            <tr class="clickable text-center" 
                onclick=
                <td>GeeksforGeeks</td>
                <td>https://ide.geeksforgeeks.org/Y4U8qx</td>
            </tr>
        </table>
    </div>
</body>
  
</html>


Output:

  • Before clicking the row:
    Whole row in a table clickable
  • After clicking the row:
    GeeksforGeeks IDE will open

Using Bootstrap Grid System: Building tables using Bootstrap Grid System is much easier and provide a lot more flexibility than using <table> tag. To make the entire row as clickable in this case, one can use a link <a> tag to wrap its content. Here’s an example of doing so.

The exact same table in the previous example can be re-designed using Bootstrap as follows:

<div class="row">
   <div class="col-6"><b>IDE</b></div>
   <div class="col-6"><b>Link</b></div>
   <div class="col-6 py-3">GeeksforGeeks</div>
   <div class="col-6 py-3">https://ide.geeksforgeeks.org/Y4U8qx</div>
</div>

Example:




<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1,
                   shrink-to-fit=no">
  
    <link rel="stylesheet" 
          href=
    <script src=
    </script>
    <script src=
    </script>
    <title>Table Row Clickable</title>
  
    <style>
        .clickable {
            height: 40px;
        }
    </style>
</head>
  
<body>
    <h1 style="color:green;text-align:center;">GeeksforGeeks</h1>
    <div class="container">
        <center class="row">
            <div style="border:2px solid black" class="col-6 py-2">
                <b>IDE</b>
            </div>
            <div style="border:2px solid black" class="col-6 py-2">
                <b>Link</b>
            </div>
  
            <div style="border:2px solid black" class="col-12">
                <a class="row clickable" 
                   href="https://ide.geeksforgeeks.org/Y4U8qx">
                    <div class="col-5 py-2">
                        GeeksforGeeks
                    </div>
                    <div class="col-5 py-2">
                        https://ide.geeksforgeeks.org/Y4U8qx
                    </div>
                </a>
            </div>
        </center>
    </div>
</body>
  
</html>


Output:

  • Before clicking the row:
    whole row in a table clickable
  • After clicking the row:
    GeeksforGeeks IDE will open


Last Updated : 23 Feb, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads