Best IT Recipes

Make a link in a table cell to fill the entire row height

I have a data table, and each cell is a link. I want the user to be able to click anywhere in the table cell and make them follow the link. Sometimes table cells have more than one row, but not always. I use td a {display: block} to get a link to most of the cell. When there is one cell in a row, which is two rows, and the rest is only one row, some inserts do not fill the entire vertical space of the table row. Here is an example of HTML and you can see it in action here http://www.jsfiddle.net/RXHuE/ :

<head> <style type="text/css"> td {width: 200px} td a {display: block; height:100%; width:100%;} td a:hover {background-color: yellow;} </style> <title></title> </head> <body> <table> <tbody> <tr> <td> <a href="http://www.google.com/">Cell 1<br> second line</a> </td> <td> <a href="http://www.google.com/">Cell 2</a> </td> <td> <a href="http://www.google.com/">Cell 3</a> </td> <td> <a href="http://www.google.com/">Cell 4</a> </td> </tr> </tbody> </table> </body>
+54
html css
Oct 19 '10 at 7:06
source share
10 answers

You need a little change in CSS. Create td height:100%; works for IE 8 and FF 3.6, but it doesn’t work for Chrome.

 td { width: 200px; border: solid 1px green; height: 100% } td a { display: block; height:100%; width:100%; }

But creating 50px height works for Chrome in addition to IE and FF

 td { width: 200px; border: solid 1px green; height: 50px } td a { display: block; height:100%; width:100%; }

Edit:

You yourself gave the decision in another post; which should use display: inline-block; . This works in conjunction with my solution for Chrome, FF3.6, IE8

 td { width: 200px; border: solid 1px green; height: 100%} td a { display: inline-block; height:100%; width:100%; }

Update

The following code works for me in IE8, FF3.6 and chrome.

CSS

 td { width: 200px; border: solid 1px green; height: 100%; } td a { display: inline-block; height:100%; width:100%; } td a:hover { background-color: yellow; }

HTML

 <table> <tbody> <tr> <td> <a href="http://www.google.com/">Cell 1<br> second line</a> </td> <td> <a href="http://www.google.com/">Cell 2</a> </td> <td> <a href="http://www.google.com/">Cell 3</a> </td> <td> <a href="http://www.google.com/">Cell 4</a> </td> </tr> </tbody> </table>

An example is presented here.

+37
Oct 19 '10 at 7:50
source share

Define an arbitrarily large negative margin and an equal complement to the block element and an overflow hidden from the parent.

 td { overflow: hidden; } td a { display: block; margin: -10em; padding: 10em; }

http://jsfiddle.net/RXHuE/213/

+82
Apr 04 '13 at 1:31
source share

After hacking works [Tested in Chrome / Firefox / Safari] Have the same add-on for td and anchor elements. And for the anchor there is also a margin, which is equal to -ve fill values.

HTML

 <table> <tr> <td><a>Hello</a></td> </tr> </table>

CSS

 td { background-color: yellow; padding: 10px; } a { cursor:pointer; display:block; padding: 10px; margin: -10px; }

Working script: http://jsfiddle.net/JasYz/

+2
Apr 11 '13 at 22:32
source share

A bit late to the party, but there is a good solution that I just discovered.

You can use a combination of relative and absolute positioned elements, as well as a pseudo-element, to get the effect of your movement. No extra markup required!

Change the table cell ( <td> ) so that it is position: relative; , and create the pseudo-element ::before or ::after in the <a> tag and set it to position: absolute; , and also use top: 0; left: 0; right: 0; bottom: 0; top: 0; left: 0; right: 0; bottom: 0; .

Since the pseudo-element is attached to the anchor tag, and you tell it that it occupies the entire cell of the table, it will force the tag anchor to be at least this size without affecting the actual content of the anchor (thereby preserving the central alignment).

for example

HTML:

 <table> <tr> <td> <a>I'm centralised</a> </td> <td> <a>I'm 100% width</a> </td> <td> <a>AND I'm 100% height</a> </td> <td> <a>WITHOUT extra markup</a> </td> <td> <a>OR JavaScript!</a> </td> </tr> </table>

CSS

 table { border-collapse: collapse; table-layout: fixed; } td { position: relative; width: 150px; border: 2px solid red; } td a { padding: 0.5em 1em; } td a::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; }

Hope this helps!

+2
Sep 03 '17 at 12:54 on
source share

Try display: block :

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

[EDIT] WTF ... I can confirm that this does not work in FF 4 and Chrome. It works:

 td a {display: block; height: 2.5em; border: 1px solid red;}

This suggests that height:100%; not defined in a table cell. Perhaps this is due to the fact that the cell gets its size from the content (therefore, the content cannot say "tell me your size" because it will lead to a loop). This does not even work if you set the height for such cells:

 td {width: 200px; height: 3em; padding: 0px}

Again, the code above will not be executed. So my suggestion is to use a specific height for links (you can omit the width, i.e. 100% by default for block elements).

[EDIT2] I looked at a hundred examples at http://www.cssplay.co.uk/menus/ , but not one of them mixes single-line and multi-line cells. It looks like you are in a dead place.

+1
Oct 19 '10 at 7:10
source share

I will post the same answer here as I did to my own question .

Inspired by Jannis M answer , I did the following:

 $(document).ready(function(){ $('table tr').each(function(){ var $row = $(this); var height = $row.height(); $row.find('a').css('height', height).append('&nbsp;'); }); });

I added &nbsp; since empty links (not containing text nodes) cannot be written (?).

See my updated fiddle .

+1
Feb 06 '12 at 11:30
source share

You can use a little javascript.

  <td onclick="window.location='http://www.google.com/'"> <a href="http://www.google.com/">Cell 3</a> </td>

Or you can create an element that completely fills the cell (div, span, whatever) and wraps around your large invisible element.

  <td> <a href="http://www.google.com/"> <div style="width:100%; height:100%;">Cell 1<br> second line </div> </a> </td>
0
Oct 19 '10 at 7:10
source share

The only problem is that using display: block causes the browser to ignore vertical align: center ...

oops.

I swore that it would look right for one cell with a height of 60 and a font that occupied 20 pixels, adding br ... Then I realized that I have some elements with 2-line text. Dang.

I ended up using javascript. Javascript does not give a nice mouse-pointed clicker element, but the line of text does, so it will actually invoke a visual response, not where I want ... Then Javascript will catch all the clicks that are “missed” by the actual href.

This may not be the most elegant solution, but at the moment it works pretty well.

Now, if I could only figure out how to do it right ...

Any ideas on how to add the mouse icon manually for the area covered by onclick? Right now, clicking on the page works, but the icon only changes when it gets into href, which affects only the text.

0
Mar 16 '13 at 9:31
source share

Why don't you just get rid of altogheter <a> and add onClick to <td> directly?

 <head> <style type="text/css"> td { text-align:center; } td:hover { cursor:pointer; color:#F00; } </style> <title></title> </head> <body> <table> <tbody> <tr> <td onclick="location.href='http://www.google.com/';">Cell 1<br />second line</td> <td onclick="location.href='http://www.google.com/';">Cell 2</a></td> <td onclick="location.href='http://www.google.com/';">Cell 3</td> <td onclick="location.href='www.google.com';">Cell 4</td> </tr> </tbody> </table>

This way you cut out the average person.

PS: I know that they asked and answered many years ago, but none of the answers above solved the problem in my case. Hope this helps someone.

-one
Sep 04 '15 at 8:35
source share

For me, the only solution is to replace <table> <tr> with <div> and style of using them with display:table and display:table-row respectively.

You can then replace <td> with <a> and style it with display:table-cell .

Work perfectly even when changing the height of the <td> content.

so the original html without anchors:

 <table> <tr> <td>content1<br>another_line</td> <td>content2</td> </tr> </table>

now it becomes:

 a:hover { background-color:#ccc; } 
  <div style="display:table; width:100%"> <div style="display:table-row"> <a href="#" style="display:table-cell; border:solid 1px #f00">content1<br>another_line</a> <a href="#" style="display:table-cell; border:solid 1px #f00">content2</a> </div> </div>
-one
Apr 28 '16 at 8:51
source share


More articles:


All Articles