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

19 Jun, 2019
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 the cases.
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 method 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>
    <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">      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />      <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="window.location='https://ide.geeksforgeeks.org/Y4U8qx'">               <td>GeeksforGeeks</td>               <td>https://ide.geeksforgeeks.org/Y4U8qx</td>            </tr>        </table>    </div>      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js">    </script>    <script src=     "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js">    </script></body>  </html>
Before clicking the row:
After clicking the row:GeeksforGeeks IDE will open
GeeksforGeeks IDE will open
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="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />      <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>      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>    <script src=     "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js">    </script></body>  </html>
Before clicking the row:
After clicking the row:GeeksforGeeks IDE will open
GeeksforGeeks IDE will open
Bootstrap-Misc
Picked
Bootstrap
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show Images on Click using HTML ?
How to Use Bootstrap with React?
Tailwind CSS vs Bootstrap
How to set vertical alignment in Bootstrap ?
How to toggle password visibility in forms using Bootstrap-icons ?
How to place table text into center using Bootstrap?
JavaScript Project on Todo List
How to add icons in project using Bootstrap ?
How to add and remove input fields dynamically using jQuery with Bootstrap ?
How to change background color of table rows or individual cells in Bootstrap ?