www.webdeveloper.com
Results 1 to 4 of 4

Thread: odd and even rows in table with different backgrounds

  1. #1
    Join Date
    Apr 2005
    Posts
    132

    odd and even rows in table with different backgrounds

    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.

  2. #2
    Join Date
    Jan 2005
    Location
    Los Angeles, CA
    Posts
    4,887

  3. #3
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,773
    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.
    Last edited by toicontien; 11-30-2005 at 12:57 PM.

  4. #4
    Join Date
    Jan 2005
    Location
    Los Angeles, CA
    Posts
    4,887
    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>
    Last edited by Ultimater; 11-30-2005 at 01:09 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles