How to make entire td a link?

Question

How do I make this entire td a link?

<td id="blue-border"><span id="blue"></span></td>

Clicking td should make it behave like this (I know this is syntactically incorrect:

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

EDIT: so far all the suggestions are only making the span inside the td a link, help lol.

What are you trying to do? Why does the table cell have to be linkable? — kdub, Jun 23 '11 at 23:00
It then acts like a giant button, which could be very mobile-friendly. — Demis, Jun 16 '21 at 00:46
I concur with the OP - none of the solutions make the whole TD, including the TD's padding/margins, clickable! The `onclick=` method might work, but nobody's yet provided a working example of making it hyperlink. — Demis, Jun 16 '21 at 03:03

score 28 · Accepted Answer · edited Feb 10 '22 at 17:02

28

Use CSS.

td a { display: block; width: 100%; height: 100%; }

<table style="width: 100%">
  <tr>
    <td><a href="#">Link</a></td>
  </tr>
</table>

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

edited Feb 10 '22 at 17:02

Flimm

136,138
45
251
267

answered Jun 23 '11 at 19:56

Will Martin

4,142
1
27
38

@LedZeppelin Here's a demo: http://jsfiddle.net/upBDc/ ... there are any number of things that could be going wrong with your code. Do you have a link? – Will Martin Jun 23 '11 at 22:43
4

This works when the td's height is explicitly specified, but not when it's determined by the other things in the row, apparently: http://jsfiddle.net/ypj10jyj/2/ – idupree Jul 28 '15 at 17:43
This doesn't expand the `` into the td's margins/padding - they are not clickable. – Demis Jun 16 '21 at 02:58
Naturally not. Content doesn't expand into padding. If you need the clickable region of the `` to extend all the way to the edges, then you'll need to remove any padding on the ``. – Will Martin Jun 17 '21 at 07:44

score 3 · Answer 2 · answered Jun 23 '11 at 19:55

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

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

answered Jun 23 '11 at 19:55

John Kalberer

5,690
1
23
27

What would the syntax be for making the hyperlink to a URL? Looks like this example runs some undefined function that presumably alters the color, instead of making a hyperlink. – Demis Jun 16 '21 at 03:00

score 3 · Answer 3 · answered Jun 23 '11 at 19:56

3

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

#blue-border a{
    display: block;
}

or

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

answered Jun 23 '11 at 19:56

rolling stone

12,668
9
45
63

score 2 · Answer 4 · answered Jun 23 '11 at 19:55

2

Define an OnClick event for the td:

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

answered Jun 23 '11 at 19:55

n8wrl

19,439
4
63
103

What happens when you do this? – n8wrl Jun 23 '11 at 21:25
1

What would the syntax be for making the `` hyperlink to a URL? – Demis Jun 16 '21 at 00:49

score 2 · Answer 5 · answered Jun 23 '11 at 19:56

2

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

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

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

#cell123:hover { cursor: pointer; }

answered Jun 23 '11 at 19:56

Joe Enos

39,478
11
80
136

How does `chooseStyle()` correspond to making the TD act as a clickable hyperlink to a URL? – Demis Jun 16 '21 at 03:02

score 2 · Answer 6 · answered Jun 23 '11 at 20:38

<table width="100%" class="blueCss">
    <tr>
        <td ID="tdBlue">
            <span id="Blue">Hello</span>
        </td>  
        <td>
            <span>other col</span>
        </td>
     </tr>
</table>

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:


$(document).ready(function(){
    var tdLink = $('#tdBlue');

    tdLink.click(function(){
         alert('blue-theme');
    });
});

Check here: jsFiddle.net

score 0 · Answer 7 · answered Feb 23 '17 at 07:28

0

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

answered Feb 23 '17 at 07:28

sumac2003

1

How to make entire td a link?

7 Answers7

Linked