Menu
I have a table of data and each cell is a link. I want to allow the user to click anywhere in the table cell and have them follow the link. Sometimes the table cells are more than one line but not always. I use td a {display: block} to get the link to cover most of the cell. When there is one cell in a row that is two lines and the others are only one line the one liners don't fill the entire vertical space of the table row. Here is the sample 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> 
636
Using <a> tag inside <td> One more way to make the whole row clickable is to add an <a> inside every <td> element. Along with it add hover to the row which we want to make clickable and use display: block property to anchor to make the whole row clickable.
The height of rows 'tr' in a table can be fixed very easily. This can be done by adding the height attribute in the tr tag. If the height is not specified, the height of the row changes according to the content. The height can be specified either in pixels, or percentage.
Set an arbitrarily large negative margin and equal padding on the block element and overflow hidden on the parent.
td { overflow: hidden; } td a { display: block; margin: -10em; padding: 10em; } http://jsfiddle.net/RXHuE/213/
188
You need a small change in your CSS. Making 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 making height to 50px 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 have given the solution yourself in another post here; which is to use display: inline-block;. This works when combined 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 is working 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> The example lays here
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
