Solved

CSS Alternate row colors

Posted on 2016-09-12
8
54 Views
Last Modified: 2016-09-13
Hello expert,

Have read several sites that say the row in a table can have
alternate row color contrast using

      table tr:nth-child(odd){
            background: #e6e6e6;
      }
      table tr:nth-child(even){
            background: #ffffff;
      }

But have tried this (complete page code
copied herewith below) with no luck.

Have tried using
<tr class="odd">
but then each <tr> must
specified individually.

Is there a more efficient way of
making the tables easier to read?

Thanks.

Allen Pitts, Dallas Texas


++++++++++++++begin html page code+++++++++++++++++++++++
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE>Table alternating row colors</TITLE>
<style type="text/css">
      .TFtable{
            width:100%;
            border-collapse:collapse;
      }
      .TFtable td{
            padding:7px; border:#4e95f4 1px solid;
      }

      /*  Define the background color for all the ODD background rows  */
      tr.odd{
            background-color: #e6e6e6;
      }
      /*  Define the background color for all the EVEN background rows  */
      tr.even{
            background-color: #ffffff;
      }
</style>
</HEAD>

<BODY >


<table class="TFtable">
      <tr class="odd"><td>Text1</td> <td>Text2</td> <td>Text3</td></tr>
      <tr class="even"><td>Text4</td> <td>Text5</td><td>Text6</td></tr>
      <tr class="odd"><td>Text</td> <td>Text</td><td>Text</td></tr>
      <tr class="even"><td>Text</td> <td>Text</td><td>Text</td></tr>
</table>
</BODY>
</HTML>

++++++++++++++end html page code+++++++++++++++++++++++
0
Comment
Question by:9apit
  • 3
  • 2
  • 2
  • +1
8 Comments
 
LVL 52

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41795067
This works for me
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE>Table alternating row colors</TITLE>
<style type="text/css">
      .TFtable{
            width:100%;
            border-collapse:collapse;
      }
      .TFtable td{
            padding:7px; border:#4e95f4 1px solid;
      }
      tr {
            background-color: #e6e6e6;
      }
	  tr:nth-child(even) {
          background-color: #ffffff;
	  }
</style>
</HEAD>

<BODY >


<table class="TFtable">
      <tr><td>Text1</td> <td>Text2</td> <td>Text3</td></tr>
      <tr><td>Text4</td> <td>Text5</td><td>Text6</td></tr>
      <tr><td>Text</td> <td>Text</td><td>Text</td></tr>
      <tr><td>Text</td> <td>Text</td><td>Text</td></tr>
</table>
</BODY>
</HTML>

Open in new window


Working sample here

For interest

tr:nth-child(even) same as tr:nth-child(2n)
tr:nth-child(odd) same as tr:nth-child(2n+1)

In the sample above we define the default style for tr then override with the tr:nth-child(even)
0
 
LVL 10

Expert Comment

by:ecarbone
ID: 41795208
try this:
1. You don't have to assign classes to your table rows.

2. Remove 'table' from your css declarations. In other words, use this:

tr:nth-child(odd){
    background: #e6e6e6;
 }

 tr:nth-child(even){
     background: #ffffff;
 }
0
 
LVL 5

Expert Comment

by:Jan Louwerens
ID: 41795245
Is it possible that it wasn't working because you had background colors specified for your TDs? (This could override any background specified for the TRs, since the TDs coule be filling up all of the space within the TRs.)
0
 
LVL 52

Expert Comment

by:Julian Hansen
ID: 41795505
Is it possible that it wasn't working because you had background colors specified for your TDs?
There are no background colours specified for <td> in the source - unless I am missing something.

Sidebar:
It is not necessary to define both an nth-child(odd) and nth-child(even). You can specify a default for <tr> and then either override the odd or even rows as required.
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:9apit
ID: 41796375
Hello Experts,

Have tried Mr. Hansen's excellent solution: has no effect:
all cells grey.

What is strange is the working sample
works as desired but the code copied into
the htm page on the local drive does not.

The result is all rows grey. In other words
the tr tag works but the   tr:nth-child(even)
does not.

Tried just   tr:nth-child(even)
Result: All cells white

Stranger still did a View Source on the working sample
and copied into local page. Result: Same, All rows grey

Tried (ecarbone) removing  .TFtable  and .TFtable td
elements. Result: same(all cells grey)  with no border or width.

It seems to be a browser compatibility issue.
Research says  tr:nth-child(even) does not
work IE 8 and younger. Using IE 11.

Unable to test on FireFox and Chrome
due to corporate restrictions.

Code tested copied herewith below.

Could someone with IE 11 try this so
it can be known if it is a browser compatibility
issue?

Thanks

Allen In Dallas

++++++++++++++begin html+++++++++++++++++++
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE>Table alternating row colors</TITLE>
<style type="text/css">
      .TFtable{
            width:100%;
            border-collapse:collapse;
      }
      .TFtable td{
            padding:7px; border:#4e95f4 1px solid;
      }
      tr {
            background-color: #e6e6e6;
      }
        tr:nth-child(even) {
          background-color: #ffffff;
        }
</style>
</HEAD>

<BODY >


<table class="TFtable">
      <tr><td>Text1</td> <td>Text2</td> <td>Text3</td></tr>
      <tr><td>Text4</td> <td>Text5</td><td>Text6</td></tr>
      <tr><td>Text</td> <td>Text</td><td>Text</td></tr>
      <tr><td>Text</td> <td>Text</td><td>Text</td></tr>
</table>
</BODY>
</HTML>

++++++++++++++end html+++++++++++++++++++
0
 
LVL 5

Expert Comment

by:Jan Louwerens
ID: 41796401
It could be the doctype declaration. Try:

<!DOCTYPE html>

Open in new window

0
 
LVL 52

Expert Comment

by:Julian Hansen
ID: 41796482
Not DOCTYPE
Code is definitely good - see screen shot of page on IE11 Emulating IE9
Are you sure you are not emulating a different version of IE.
I can guarantee the code is good for modern browsers - if it is not working on your side then it is the browser. IE8 will not work, anything above this is fine.
F12 to get to your console - click the emulation tab and ensure you are not on IE8 (or lower) emulation
Screenshot
1
 

Author Closing Comment

by:9apit
ID: 41796612
Hello Mr. Hansen,

This is wierd. When opened using IE 11 from shared drive on network the tr:nth-child (even) does not work.

When opened from C: , local hard drive, the alternating rows appear. I believe it had I guessed: something to do with the highly regulated LAN.
For instance I am having to
Closing this question using my iphone because when I try to
Close on computer I get 'This operation has been canceled due to. restrictions on effect on this computer. please contact your system administrator.'
Big brother is watching.

Thanks
Allen
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Error in page 3 46
P tag not forcing line space 2 23
is this a cms? 8 36
Not seen Link button 5 19
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

864 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now