Highlight entire table row on hover

Question

I have a table where I would like to highlight the entire row when it is hovered over, and that entire row would be clickable as a link. Right now, it only hovers as a clickable link when you are within the area of the text. It hovers correctly the entire width, but it won't work on the top and bottom once you past the text area. Please see my webpage www.twoguysplayingzelda.com/athenaveta/ for an example of this.

 .post-content table { border-collapse: collapse; border-spacing: 0; empty-cells: show; font-size: 0.9em; width: 100%; } .post-content th, .post-content td { padding: 2%; margin: 0; overflow: visible; line-height: 75%; border-top: 2px solid #000000; border-bottom: 2px solid #000000; } .post-content caption { text-align: center; padding: 2%; } .post-content thead { vertical-align: bottom; white-space: nowrap; } .post-content th { font-weight: bold; } table tr td a { display: block; height: 100%; width: 100%; } td:hover { background: #f0f0f5; } 

 <table> <tbody> <tr> <td><strong><span id="writer-pages" style="font-size: 14pt; font-family: Latin, 'Architects Daughter';"><a href="http://twoguysplayingzelda.com/news/check-out-this-epic-rap-battle- between-zelda-and-peach/">Check out this epic rap battle between Zelda and Peach!</a></span></strong></td> </tr> <tr> <td><strong><span id="writer-pages" style="font-size: 14pt; font-family: Latin, 'Architects Daughter';"><a href="http://twoguysplayingzelda.com/news/the-trouble-with-triforces/">The Trouble with Triforces</a></span></strong></td> </tr> <tr> <td><strong><span id="writer-pages" style="font-size: 14pt; font-family: Latin, 'Architects Daughter';"><a href="http://twoguysplayingzelda.com/news/acapella-a-tribute-to-zelda- themes/">Acapella: A Tribute to Zelda Themes</a></span></strong></td> </tr> </tbody> </table> 

Answer 1

Update you css file like:

.post-content table {
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
  font-size: 0.9em;
  width: 100%;
}

.post-content th,
.post-content td {
    padding: 0px;
    margin: 0;
    overflow: visible;
    line-height: 75%;
    border-top: 2px solid #000000;
    border-bottom: 2px solid #000000;
}

.post-content caption {
  text-align: center;
  padding: 2%;
}

.post-content thead {
  vertical-align: bottom;
  white-space: nowrap;
}

.post-content th {
  font-weight: bold;
}

table tr td a {
    display: block;
    height: 100%;
    width: 100%;
    padding: 2%;
}

td:hover {
  background: #f0f0f5;
}

Example:

 .post-content table { border-collapse: collapse; border-spacing: 0; empty-cells: show; font-size: 0.9em; width: 100%; } .post-content th, .post-content td { padding: 0px; margin: 0; overflow: visible; line-height: 75%; border-top: 2px solid #000000; border-bottom: 2px solid #000000; } .post-content caption { text-align: center; padding: 2%; } .post-content thead { vertical-align: bottom; white-space: nowrap; } .post-content th { font-weight: bold; } table tr td a { display: block; height: 100%; width: 100%; padding: 2%; } td:hover { background: #f0f0f5; } 

 <table> <tbody> <tr> <td><strong><span id="writer-pages" style="font-size: 14pt; font-family: Latin, 'Architects Daughter';"><a href="http://twoguysplayingzelda.com/news/check-out-this-epic-rap-battle- between-zelda-and-peach/">Check out this epic rap battle between Zelda and Peach!</a></span></strong></td> </tr> <tr> <td><strong><span id="writer-pages" style="font-size: 14pt; font-family: Latin, 'Architects Daughter';"><a href="http://twoguysplayingzelda.com/news/the-trouble-with-triforces/">The Trouble with Triforces</a></span></strong></td> </tr> <tr> <td><strong><span id="writer-pages" style="font-size: 14pt; font-family: Latin, 'Architects Daughter';"><a href="http://twoguysplayingzelda.com/news/acapella-a-tribute-to-zelda- themes/">Acapella: A Tribute to Zelda Themes</a></span></strong></td> </tr> </tbody> </table>