Make A Whole Row In A Table "link-able"

I have this code where the whole div is clickable and link to different URLS jsfiddle.net/#&togetherjs=eBw8xooaHu I want to make it work in a table and make the whole row click

Solution 1:

I recomend to use Jasny Bootstrap.

The way to add Jasny to your project its the same whit bootstrap.

Before import the libraries adding the next lines:

<linkrel="stylesheet"href="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.min.css"><scriptsrc="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.min.js"></script>

after that add the class to your table:

<table class="table table-striped table-bordered table-hover">

and the tbody tag

<tbody data-link="row"class="rowlink">

on first td tag add the link whit a tag, td content pushed in to a tag. Like this:

<td><ahref="#inputmask">Input mask</a></td>

if you desire its no show link in a td, then add to this td tag the class:

<td class="rowlink-skip">

when, your row link its now working at 100%.

References: Jasny Bootstrap

Sample: Sample

Solution 2:

Your fiddle links doesn't work, therefore I have to guess. If I wanted a table row to be clickable I would try to build it with an a-tag instead of a tr tag and use

table>a { display:table-row; }

for it.

<table><ahref=""><td></td></a></table>