html - Make a whole row in a table "link-able"

Question

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 clickable so I ended up to smth like this..

jsfiddle.net/#&togetherjs=bKRMP3bSl3

Is this manageable or I am looking to the wrong direction?

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

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.min.css">
<script src="//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><a href="#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