[ACCEPTED]-How to make entire td a link?-css

Accepted answer
Score: 27

Use CSS.

<style type="text/css">
td a { display: block; width: 100%; height: 100%; }

<td><a href="#">Link</a></td>

The CSS forces the link to expand 1 to the full width and height of the TD.

Score: 3

You can't wrap a td in an anchor. Do this:

<td id="blue-border"><a href="javascript:chooseStyle('green-theme', 360)"> <span id="blue"></span></a></td> 

Or 1

<td onclick="chooseStyle('green-theme', 360)" id="blue-border"><span id="blue"></span></td>
Score: 3

Add an anchor tag inside of the td and set 2 its display attribute to block. This should 1 make the entire td clickable.

#blue-border a{
    display: block;


<a href="link" style="display:block;">
Score: 2

Define an OnClick event for the td:

<td id="blue-border" onclick="chooseStyle('blue-theme', 360)">...


Score: 2

If all you're doing is firing javascript, I'd 4 suggest using onclick instead of an anchor tag 3 in the first place, like:

<td id="cell123" onclick="chooseStyle('green-theme',360)">cell contents</td>

You can throw a 2 simple css style on there if you want the 1 mouse to become a pointer:

#cell123:hover { cursor: pointer; }
Score: 2
<table width="100%" class="blueCss">
        <td ID="tdBlue">
            <span id="Blue">Hello</span>
            <span>other col</span>

css file:

.blueCss {
        height: 100px;
        width: 100px;

    .blueCss td {
        background-color: blue;

    .blueCss:hover    {
        border-color: #00ae00;

    .blueCss td:hover    {
        background-color: yellow;
        cursor: pointer;

jQuery code:

    var tdLink = $('#tdBlue');


Check here: jsFiddle.net


Score: 0

Use jquery with class
$("tr td.data_col").click(function() { window.location = $(this).find('a').attr("href"); });


More Related questions