CODEWITHSUNDEEP
htmlcss
Ronaldo
Ronaldo

Reputation: 367

table row as anchor

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?

Upvotes: 4

Views: 6751

Answers (3)

Anas Hafez
Anas Hafez

Reputation: 1

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>

Upvotes: 0

mkstlwtz
mkstlwtz

Reputation: 720

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' );

Upvotes: 1

davidgoli
davidgoli

Reputation: 2495

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

Upvotes: 2

Related Questions