nth-child() not displaying in print media

Question

Ignoring the table made of divs (believe me, I've had that discussion with the powers that be), I am having trouble getting my alternating row background colors to view for my print media. Here is what I've got:

<div class="table">
   <div class="head">
     <div class="headcell">Column 1 is this long</div>
     <div class="headcell">Column 2 but this neeeds to be this long</div>
     <div class="headcell">Column 3</div>
   </div>
   <div class="row">
     <div class="cell">Column 1 is this long</div>
     <div class="cell">Column 2 but this neeeds to be this lonn</div>
     <div class="cell">Column 3</div>
   </div>
   <div class="row">
     <div class="cell">Column 1</div>
     <div class="cell">Column 2</div>
     <div class="cell">Column 3</div>
   </div>
   <div class="row">
     <div class="cell">Column 1</div>
     <div class="cell">Column 2</div>
     <div class="cell">Column 3</div>
   </div>
   <div class="row">
     <div class="cell">Column 1</div>
     <div class="cell">Column 2</div>
     <div class="cell">Column 3</div>
   </div>
   <div class="row">
     <div class="cell">Column 1</div>
     <div class="cell">Column 2</div>
     <div class="cell">Column 3</div>
   </div>
</div>

And my CSS:

@media print
{
h1  {
  margin-top: 17.67pt;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-style: normal;
  font-size: 16pt;
  margin-bottom: 1.67pt;
  padding-left: none;
  background-image: none;
  text-decoration: underline !important;
}

/*Table made of Divs PDF Styles*/
.table {
  font-family: sans-serif;
  font-size: 12px;
  display: table;
  width: 80%;
  margin: 20px; 
}

.head {
  display: table-row;
  border: #ccc 1px solid;
  padding:4px 10px;
  text-align:center;
  font-weight: bold;
  background-color: #ccc;
}

.row {
  display: table-row;
  border: #ccc 1px solid;
}

.headcell {
  display: table-cell;
  border: #ccc 1px solid;
  padding: 10px;
  font-align: center;
}

.cell {
  display: table-cell;
  padding: 10px;
  border: #ccc 1px solid;
}

div.row:nth-child(odd) {
  background-color: #ccc;
}

div.row:nth-child(even) {
  background-color: #fff;
}
}

I appreciate everyone's help!

Answer 1

You cannot force to print the end-user to print background colors. This is a printer setting in the browser which can be turned off. That is why it does not work. Your nth-child selectors work just fine. See screen shot below of the print preview.

http://jsfiddle.net/Gjf8K/3/

 @media print {
  div.row:nth-child(odd) {
   background-color: #ccc;
   color: red;
  }
  div.row:nth-child(even) {
  background-color: #fff;
  color: green;
  }
 }