Home tips How to highlight table row background css. Works in all browsers. Without JS.
Wednesday, 03 March 2010 07:38

How to highlight table row background css. Works in all browsers.

I spent hours to find how to highlight background image in table row. In google a fond a tons of tips, but no one give me all browsers compatible. So, i created my own, works in MAC: FF, Safari PC: IE6/7/8, FF, Safari, Google Chrome. (IE 6 shows only row background, mouse over doesn't work)

 

Here is example what we have to get:

 

Time Date City Price
06:00 14 May 2010 New York $700
08:00 17 Feb 2010 Los Angeles $750
06:50 14 May 2010 Tampa $710
11:20 14 Jun 2010 Miami $730

 

 

Ok, let's start:

 

I have already created PNG image with two backgrounds. width 600px height 100px. (Save image to the same folder as your html)

How to highlight table row background

 

Create TABLE with tableRowHover class and with TR class trHover.

 


<table border="0" cellpadding="0" cellspacing="0" class="tableRowHover">
<tr>
<th>Time</th>
<th>Date</th>
<th>City</th>
<th>Price</th>
</tr>
<tr class="trHover">
<td>06:00</td>
<td>14 May 2010</td>
<td>New York</td>
<td>$700</td>
</tr>
</table>

 

Add CSS:

 


<style>
table.tableRowHover {
width: 600px;
}
table.tableRowHover tr.trHover {
background: url(row-bg.png) no-repeat 0 0;
position: relative;
}
table.tableRowHover tr:hover {
background-position: 0 -50px;
}
table.tableRowHover td {
height: 50px;
background-image: none;
}
</style>

 

Explanation:

For TR we added position: relative and for TD background-image: none - This is background fix for IE!

We create TABLE with fixed width 600px, same width has our background image.

For TD we added fixed height 50px (half of our double image), so, for hover in TR:HOVER we added negative Y background position -50px;

 

Note: in top of HTML page have to be:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

otherwise in IE rollover will not work

 

Now, You have to get this. (will open in new browser window)

 

It works in all browsers except Mac Safari. So if you don't need this browser this is it.

 

Safari ROW background rollover fix, its time for rain dance. We will use background-position method.

 

In our Html code we have to add classes to our TH's: header1, header2, header3, header4 and for TD's: cell1, cell2, cell3, cell4.

 


<table border="0" cellpadding="0" cellspacing="0" class="tableRowHover">
<tr>
<tr>
<th class="header1">Time</th>
<th class="header2">Date</th>
<th class="header3">City</th>
<th class="header4">Price</th>
</tr>
</tr>
<tr class="trHover">
<td class="cell1">06:00</td>
<td class="cell2">14 May 2010</td>
<td class="cell3">New York</td>
<td class="cell4">$700</td>
</tr>

 

In CSS we have to add this code:

 


<style>
table.tableRowHover .header1 {
width: 100px;
}
table.tableRowHover .header2 {
width: 200px;
}
table.tableRowHover .header3 {
width: 200px;
}
table.tableRowHover .header4 {
width: 100px;
 border-right: none;
}
</style>

<![if !IE]>
<style>
table.tableRowHover tr.trHover td.cell1 {
background: url(row-bg.png) no-repeat 0 0;
}
table.tableRowHover tr.trHover:hover td.cell1 {
background-position: 0 -50px;
}

table.tableRowHover tr.trHover td.cell2 {
background: url(row-bg.png) no-repeat -100px 0;
}
table.tableRowHover tr.trHover:hover td.cell2 {
background-position: -100px -50px;
}

table.tableRowHover tr.trHover td.cell3 {
background: url(row-bg.png) no-repeat -300px 0;
}
table.tableRowHover tr.trHover:hover td.cell3 {
background-position: -300px -50px;
}

table.tableRowHover tr.trHover td.cell4 {
background: url(row-bg.png) no-repeat 100% 0;
}
table.tableRowHover tr.trHover:hover td.cell4 {
background-position: 100% -50px;
}
</style>
<![endif]>

 

Explanation:

Our table has fixed width 600px each TD's also have fixed width: 100+200+200+100=600. So, for each td we use X negative image position:

For first TD background-position: 0 0

For second TD  background-position: -100px 0

For third TD background-position: -300px 0

For fourth TD background-position: -500px 0 or background-position: 100% 0

This code between this tag < ! [ if ! IE ] >   < ! [ endif ] > only for FF and Safary - not for IE.

 

Now it works in Safari :)

 

Ok, now all HTML Code:

 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

<![if !IE]>
<style>
table.tableRowHover tr.trHover td.cell1 {
background: url(row-bg.png) no-repeat 0 0;
}
table.tableRowHover tr.trHover:hover td.cell1 {
background-position: 0 -50px;
}

table.tableRowHover tr.trHover td.cell2 {
background: url(row-bg.png) no-repeat -100px 0;
}
table.tableRowHover tr.trHover:hover td.cell2 {
background-position: -100px -50px;
}

table.tableRowHover tr.trHover td.cell3 {
background: url(row-bg.png) no-repeat -300px 0;
}
table.tableRowHover tr.trHover:hover td.cell3 {
background-position: -300px -50px;
}

table.tableRowHover tr.trHover td.cell4 {
background: url(row-bg.png) no-repeat 100% 0;
}
table.tableRowHover tr.trHover:hover td.cell4 {
background-position: 100% -50px;
}
</style>
<![endif]>

<style>
table.tableRowHover {
width: 600px;
font-family: Verdana;
text-align: left;
font-size: 18px;
text-indent: 28px;
}
table.tableRowHover th {
background: #ffcc00;
border-right: 2px solid #fff;
color: #3b3939;
font-size: 12px;
height: 20px;
vertical-align: middle;
}

table.tableRowHover .header1 {
width: 100px;
}

table.tableRowHover .header2 {
width: 200px;
}

table.tableRowHover .header3 {
width: 200px;
}

table.tableRowHover .header4 {
width: 100px;
 border-right: none;
}

table.tableRowHover tr {
background: url(row-bg.png) no-repeat 0 0;
position: relative;
}
table.tableRowHover tr:hover {
background-position: 0 -50px;
}

table.tableRowHover td {
height: 50px;
background-image: none;
}
</style>

</head>
<body>

<table border="0" cellpadding="0" cellspacing="0" class="tableRowHover">
<tr>
<th class="header1">Time</th>
<th class="header2">Date</th>
<th class="header3">City</th>
<th class="header4">Price</th>
</tr>
<tr class="trHover">
<td class="cell1">06:00</td>
<td class="cell2">14 May 2010</td>
<td class="cell3">New York</td>
<td class="cell4">$700</td>
</tr>
<tr class="trHover">
<td class="cell1">08:00</td>
<td class="cell2">17 Feb 2010</td>
<td class="cell3">Los Angeles</td>
<td class="cell4">$750</td>
</tr>
<tr class="trHover">
<td class="cell1">06:50</td>
<td class="cell2">14 May 2010</td>
<td class="cell3">Tampa</td>
<td class="cell4">$710</td>
</tr>
<tr class="trHover">
<td class="cell1">11:20</td>
<td class="cell2">14 Jun 2010</td>
<td class="cell3">Miami</td>
<td class="cell4">$730</td>
</tr>
</table>

</body>
</html>

 

Now you should have this. (will open in new browser window)

 

I hope it will help :) if you have any questions, fill free to drop me a comment...
Last Updated on Wednesday, 03 March 2010 10:43
 

Comments 

 
#1 2010-04-19 10:28
It works great! Thanks for sharing.
Quote
 
 
#2 2010-11-17 01:17
Is there anyway to add the css into the table? I want to be able to post the code to a html area box a bit like this comment box and do not have access to the header.

I don't need a pictorial background. Based on your code I tried this

style="table.tableRowHover.background-color: pink; table.tr.trHover.background-color: pink;"

but I am not getting a hover effect.
Quote
 
 
#3 2010-11-18 04:20
#2 Tim: Actually, you can't add this code directly in HTML/Table.

In table style you can't use Classes IDs. You code should looks like:

style="background-color: pink"

So you should ask administrator for FTP accesses.
Quote
 

Add comment


Security code
Refresh

© 2010. Sopov.com