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

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.

    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 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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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" 
      
        <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>
        <script src=
        </script>
    </body>
      
    </html>

    chevron_right

    
    

      Output:

    • Before clicking the row:
    • 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:

      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      <!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" 
        
          <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=
          </script>
      </body>
        
      </html>

      chevron_right

      
      

      Output:

    • Before clicking the row:
    • After clicking the row:
      GeeksforGeeks IDE will open


    My Personal Notes arrow_drop_up

    Check out this Author's contributed articles.

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




    Article Tags :

    Be the First to upvote.


    Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.