odd and even rows in table with different backgrounds

**Rxyz** · 11-30-2005 12:44 PM

trying to get have odd and even rows in the table with different colors. But not getting it. what am I missing here?

table.smallTable {
width: 300px;
font: 11px arial, helvetica, sans-serif;
border-collapse: collapse;
border: solid 2px black;
}
table.smallTable td, .smallTable th {
border: solid 1px black;
padding: 2px 9px;
}
table.smallTable th {
text-align: left;
font-weight: bold;
width: 50%;
background-color: #3CB371;
color: white;
}
table.smallTable tr.even {
background-color: #EEE;
}
table.smallTable tr.odd {
background-color: white;
}
table.smallTable tr.tableRowEven{
background-color: #EEE;
}

Thanks.

**Ultimater** · 11-30-2005 12:54 PM

Looks fine to me, did you use valid HTML?

**toicontien** · 11-30-2005 12:54 PM

Piece of cake.

HTML Code:

<style type="text/css" media="screen">
.smallTable td {
 background-color: #fff;
}

.smallTable tr.even td {
 background-color: #ccc;
}
</style>
</head>
<body>
 <table>
  <tbody>
   <tr>
    <td>Foo</td>
   </tr>
   <tr class="even">
    <td>Foo</td>
   </tr>
  </tbody>
 </table>

EDIT: I think the issue with your code is that you're trying to apply a background color to the TR tag. I've tried coloring table rows before to no avail, but it always works on the TD tags.

**Ultimater** · 11-30-2005 01:03 PM

You can apply colors to the TRs to effect all the TDs:
(tested in Firefox and IE)

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
body{font:1.2em arial,sans-serif;direction:ltr;margin:0;background-color:white;color:black;}
table{padding:0;margin:0;}
table.smallTable tr.even{background-color: rgb(238,238,238);color:black;}
table.smallTable tr.odd{background-color:white;color:black;}
</style>
<title></title>
</head>
<body>
<table class="smallTable">
<colgroup span="4">
<col width="60">
<col width="60">
<col width="60">
<col width="60">
</colgroup>
<tbody>
<tr class="even">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr class="odd">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr class="even">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr class="odd">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</body>
</html>

Thread: odd and even rows in table with different backgrounds

Thread Tools

Display

odd and even rows in table with different backgrounds

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions