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

jsfiddle.net/#&togetherjs=bKRMP3bSl3

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

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

回答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>
    <a href="">
        <td></td>
    </a>
</table>

来源：https://stackoverflow.com/questions/20694182/make-a-whole-row-in-a-table-link-able