how to make a whole row in a table clickable as a link?

Question

I\'m using Bootstrap and the following doesn\'t work:

    
        
            Blah Blah
           


        

Answer 1

<table>
  <tr tabindex="0" onmousedown="window.location='#';">
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

Replace # with the url, tabindex="0" makes any element focusable

Answer 2

This code bellow will make your whole table clickable. Clicking the links in this example will show the link in an alert dialog instead of following the link.

The HTML:

Here's the HTML behind the above example:

    <table id="example">
    <tr>
     <th>&nbsp;</th>
     <th>Name</th>
     <th>Description</th>
     <th>Price</th>
   </tr>
   <tr>
     <td><a href="apples">Edit</a></td>
     <td>Apples</td>
     <td>Blah blah blah blah</td>
     <td>10.23</td>
   </tr>
    <tr>
     <td><a href="bananas">Edit</a></td>
     <td>Bananas</td>
     <td>Blah blah blah blah</td>
     <td>11.45</td>
   </tr>
   <tr>
     <td><a href="oranges">Edit</a></td>
     <td>Oranges</td>
     <td>Blah blah blah blah</td>
     <td>12.56</td>
   </tr>
    </table>

The CSS

And the CSS:

    table#example {
    border-collapse: collapse;   
}
#example tr {
    background-color: #eee;
    border-top: 1px solid #fff;
}
#example tr:hover {
    background-color: #ccc;
}
#example th {
    background-color: #fff;
}
#example th, #example td {
    padding: 3px 5px;
}
#example td:hover {
    cursor: pointer;
}

The jQuery

And finally the jQuery which makes the magic happen:

    $(document).ready(function() {

    $('#example tr').click(function() {
        var href = $(this).find("a").attr("href");
        if(href) {
            window.location = href;
        }
    });

});

What it does is when a row is clicked, a search is done for the href belonging to an anchor. If one is found, the window's location is set to that href.

Answer 3

Achieved using standard Bootstrap 4.3+ as follows - no jQuery nor any extra css classes needed!

The key is to use stretched-link on the text within the cell and defining <tr> as a containing block.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table table-hover">
  <tbody>
    <tr style="transform: rotate(0);">
    <th scope="row"><a href="#" class="stretched-link">1</a></th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

You can define containing block in different ways for example setting transform to not none value (as in example above).

For more information read here's the Bootstrap documentation for stretched-link.

Answer 4

Here's an article that explains how to approach doing this in 2020: https://www.robertcooper.me/table-row-links

The article explains 3 possible solutions:

1. Using JavaScript.
2. Wrapping all table cells with anchorm elements.
3. Using <div> elements instead of native HTML table elements in order to have tables rows as <a> elements.

The article goes into depth on how to implement each solution (with links to CodePens) and also considers edge cases, such as how to approach a situation where you want to add links inside you table cells (having nested <a> elements is not valid HTML, so you need to workaround that).

As @gameliela pointed out, it may also be worth trying to find an approach where you don't make your entire row a link, since it will simplify a lot of things. I do, however, think that it can be a good user experience to have an entire table row clickable as a link since it is convenient for the user to be able to click anywhere on a table to navigate to the corresponding page.

Answer 5

A linked table row is possible, but not with the standard <table> elements. You can do it using the display: table style properties. Here and here are some fiddles to demonstrate.

This code should do the trick:

.table {
  display: table;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  padding: 10px;
}

.row:hover {
  background-color: #cccccc;
}

.cell:hover {
  background-color: #e5e5e5;
}

<link href="https://stackpath.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />

<div role="grid" class="table">
  <div role="row" class="row">
    <div role="gridcell" class="cell">
      1.1
    </div>
    <div role="gridcell" class="cell">
      1.2
    </div>
    <div role="gridcell" class="cell">
      1.3
    </div>
  </div>

  <a role="row" class="row" href="#">
    <div role="gridcell" class="cell">
      2.1
    </div>
    <div role="gridcell" class="cell">
      2.2
    </div>
    <div role="gridcell" class="cell">
      2.3
    </div>
  </a>
</div>

Note that ARIA roles are needed to ensure proper accessibility since the standard <table> elements are not used. You may need to add additional roles like role="columnheader" if applicable. Find out more at the guide here.

Answer 6

A much more flexible solution is to target anything with the data-href attribute. This was you can reuse the code easily in different places.

<tbody>
    <tr data-href="https://google.com">
        <td>Col 1</td>
        <td>Col 2</td>
    </tr>
</tbody>

Then in your jQuery just target any element with that attribute:

jQuery(document).ready(function($) {
    $('*[data-href]').on('click', function() {
        window.location = $(this).data("href");
    });
});

And don't forget to style your css:

[data-href] {
    cursor: pointer;
}

Now you can add the data-href attribute to any element and it will work. When I write snippets like this I like them to be flexible. Feel free to add a vanilla js solution to this if you have one.