4

I'm trying to set my entirely table row as an anchor. I've read here that It's not a good practice to put all table row content inside a anchor tag because the html standard doesn't permit this.

What's the best strategy to accomplish this?

I'm analysing the possibility to put an anchor tag inside each table cell, as I've done on .day div on this example: http://jsfiddle.net/XdfCp/4/ Is this a good solution?

The problem with this solution is that the anchor is not covering all table cell space. I've configured the anchor at this way, but It didn't take all cell space:

    #ListaEventosPorMes a{
        display: block;
        width: 100%;
        height: 100%;
        color: White;
    }

The other behavior I need is to get the hover effect in all row and not on specific table cell anchor. Do you have any idea to resolve this?

Ronaldo
  • 357
  • 2
  • 8
  • 21
  • Do you need to use the anchor for a link, or just for the CSS hover effect? – Nightfirecat Jun 29 '12 at 01:05
  • Well you could make a javascript onclick event, on the table row instead of putting an entire row in an a tag? (and still have a a tag some where for SEO) – BjarkeCK Jun 29 '12 at 01:23
  • Yes, I could! If I do in this way, isn't necessary to put the anchor in each table cell? I think it's the best solution. How can I do this? – Ronaldo Jun 29 '12 at 01:58

3 Answers3

2

All major browsers since IE7 support the :hover CSS pseudoclass on all elements, including tr, so you don't need to use an anchor to style the hover state.

As for your other question, take a look at this answer: Make link in table cell fill the entire row height

Community
  • 1
  • 1
davidgoli
  • 2,436
  • 1
  • 16
  • 13
  • I've done that. http://jsfiddle.net/XdfCp/7/ But in this way, the anchor's hover doesn't take effect. It seens that the baground color I've applied(rgba(114,40,39,0.8)) is behind the element. This effect also occurs when I set the hover to my li tag. – Ronaldo Jun 29 '12 at 02:13
  • 1
    In that case, don't use the anchor's hover - use the table row for the hover effect, eg: `tr:hover { background: rgba(114,40,39,0.8); }` – davidgoli Jun 29 '12 at 02:14
  • It's also occurs when I put the hover on li (that is my row element). – Ronaldo Jun 29 '12 at 02:15
  • Take a look http://jsfiddle.net/XdfCp/7/ I not using html table, but div + display: table. – Ronaldo Jun 29 '12 at 02:16
  • 1
    The reason you're not seeing the background color update is because you have a background color set on an internal element, `#ListaEventosPorMes .detalhes`, that shows up over the li. Make this invisible, and you see the hover behavior. – davidgoli Jun 29 '12 at 02:26
  • Hi. I resolved the problem putting the name of element after :hover. Like this: #ListaEventosPorMes li:hover .seta, #ListaEventosPorMes li:hover .detalhes, #ListaEventosPorMes li:hover a { background-color: rgba(114,40,39,0.7); cursor: pointer; border-radius: 10px 10px 10px 10px;} – Ronaldo Jun 29 '12 at 03:20
1

I am not sure what you are trying to do with the anchor. I have a table used to display rows of an SQL table. As PHP creates the table it inserts an onclick into each row header with the index of the row as an argument. No anchor is used.

while ($row = mysql_fetch_array($result)) {
    $id = $row['resv_id'];
    $funct_call="Edit_Row($id)";
    echo "<tr " . "onclick=$funct_call" .  " >";
}

The onclick function body is:

var target="./entry_form.php?submit=Edit&resv_id=index_num";
window.open( target.replace("index_num",id),'_self' );
Jonas G. Drange
  • 8,749
  • 2
  • 27
  • 38
mkstlwtz
  • 720
  • 2
  • 7
  • 19
0

put inside each td of the row an anchor tag and put inside the anchor tag a div But you need to give it a height (it's better to give it a min-height as if the content needed to expand)

.link {
width:100%;
min-height:100px; /**For example**/

}
<tr>
  <td><a><div class="link"></div></a></td>
  <td><a><div class="link"></div></a></td>
  <td><a><div class="link"></div></a></td>
</tr>
Anas Hafez
  • 1
  • 1