• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 279
  • Last Modified:

How to highlight a row of a cell in HTML using CSS?

Hi,
I have the following HTML code. In this code, each cell gets highlighted when you hover  over it. But I'd like to highlight the entire row of this cell when I hover over a cell.

How should I change this code to make it?

Thanks,

<style type="text/css">
.mytable th {
}
.mytable th, .mytable td {
text-align:left
} 
#mytable {
border: 1px solid #e3e3e3;
background-color: #f2f2f2;
width: 100%;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}
#mytable td, #mytable th {
padding: 5px;
color: #333;
}
#mytable thead {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
padding: .2em 0 .2em .5em;
text-align: left;
color: #4B4B4B;
background-color: #C8C8C8;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#e3e3e3), color-stop(.6,#B3B3B3));
background-image: -moz-linear-gradient(top, #D6D6D6, #B0B0B0, #B3B3B3 90%);
border-bottom: solid 1px #999;
}
#mytable th {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
line-height: 20px;
font-style: normal;
font-weight: normal;
text-align: left;
text-shadow: white 1px 1px 1px;
}
#mytable td {
line-height: 20px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
border-bottom: 1px solid #fff;
border-top: 1px solid #fff;
}
#mytable td:hover {
background-color: #fff;
}
</style>
<html>
<head>
</table>
<p>
<table>
<p>
<table id="mytable">
<thead>
<tr>
<th>something</th>
<th>something</th>
<th>something</th>
</thead>
<tbody>
<td>something</td>
<td>something</td><td><a href="something" style="color: red">something</a></td></tr>
<td>something</td>
<td>something</td><td><a href="something" style="color: red">something</a></td></tr>
<td>something</td>
<td>something</td><td><a href="something" style="color: red">something</a></td></tr>
<td>something</td>
<td>something</td><td><a href="something" style="color: red">something</a></td></tr>
<br><br> </tbody>
</table>
</body>
</html>
<table>
</body>
</html>

Open in new window

0
Tolgar
Asked:
Tolgar
  • 2
  • 2
1 Solution
 
Andrew DerseIT ManagerCommented:
You were VERY close...

Try this...
<style type="text/css">
.mytable th {
}
.mytable th, .mytable td {
text-align:left
} 
#mytable {
border: 1px solid #e3e3e3;
background-color: #f2f2f2;
width: 100%;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}
#mytable td, #mytable th {
padding: 5px;
color: #333;
}
#mytable thead {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
padding: .2em 0 .2em .5em;
text-align: left;
color: #4B4B4B;
background-color: #C8C8C8;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#e3e3e3), color-stop(.6,#B3B3B3));
background-image: -moz-linear-gradient(top, #D6D6D6, #B0B0B0, #B3B3B3 90%);
border-bottom: solid 1px #999;
}
#mytable th {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
line-height: 20px;
font-style: normal;
font-weight: normal;
text-align: left;
text-shadow: white 1px 1px 1px;
}
#mytable tr {
line-height: 20px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
border-bottom: 1px solid #fff;
border-top: 1px solid #fff;
}
#mytable tr:hover {
background-color: #fff;
}
</style>
<html>
<head>
</table>
<p>
<table>
<p>
<table id="mytable">
<thead>
<tr>
<th>something</th>
<th>something</th>
<th>something</th>
</thead>
<tbody>
<td>something</td>
<td>something</td><td><a href="something" style="color: red">something</a></td></tr>
<td>something</td>
<td>something</td><td><a href="something" style="color: red">something</a></td></tr>
<td>something</td>
<td>something</td><td><a href="something" style="color: red">something</a></td></tr>
<td>something</td>
<td>something</td><td><a href="something" style="color: red">something</a></td></tr>
<br><br> </tbody>
</table>
</body>
</html>
<table>
</body>
</html>

Open in new window


Basically changed lines 38 and 45 from td to tr.
0
 
TolgarAuthor Commented:
Hi again,
I just realized that this highlighting functionality does not work on IE at all. Is there a way to make it work?

Thanks,
0
 
Andrew DerseIT ManagerCommented:
Here's a sample code ( cleaned up...your previous code had lots of extra stuff and missing stuff ).

This code is using jQuery to change the classes on hover...

<html>
<head>
<style type="text/css">
.mytable th {
}
.mytable th, .mytable td {
text-align:left
} 
#mytable {
border: 1px solid #e3e3e3;
background-color: #f2f2f2;
width: 100%;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}
#mytable td, #mytable th {
padding: 5px;
color: #333;
}
#mytable thead {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
padding: .2em 0 .2em .5em;
text-align: left;
color: #4B4B4B;
background-color: #C8C8C8;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#e3e3e3), color-stop(.6,#B3B3B3));
background-image: -moz-linear-gradient(top, #D6D6D6, #B0B0B0, #B3B3B3 90%);
border-bottom: solid 1px #999;
}
#mytable th {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
line-height: 20px;
font-style: normal;
font-weight: normal;
text-align: left;
text-shadow: white 1px 1px 1px;
}
#mytable tr {
line-height: 20px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
border-bottom: 1px solid #fff;
border-top: 1px solid #fff;
}
.hover { background-color: #fff; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
 $(document).ready(function() {
    $('tr').hover(
        function () {
            $(this).addClass('hover');
        },
        function () {
            $(this).removeClass('hover');
        }
    );
});
</script>
</head>
<table id="mytable">
	<thead>
		<tr>
			<th>something</th>
			<th>something</th>
			<th>something</th>
		</tr>
	</thead>
	<tbody>
		<tr>
        	<td>something</td>
			<td>something</td>
            <td><a href="something" style="color: red">something</a></td>
        </tr>
		<tr>
        	<td>something</td>
			<td>something</td>
            <td><a href="something" style="color: red">something</a></td>
        </tr>
        <tr>
        	<td>something</td>
			<td>something</td>
            <td><a href="something" style="color: red">something</a></td>
        </tr>
        <tr>
        	<td>something</td>
			<td>something</td>
            <td><a href="something" style="color: red">something</a></td>
        </tr>
	</tbody>
</table>
</body>
</html>

Open in new window

0
 
TolgarAuthor Commented:
Thanks,
 That works great!!!
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now