Nth-child () does not appear in print media

Question

Ignoring a table made from a div (believe me, I had this discussion with permissions), I had problems getting background colors for changing colors for my print media. Here is what I have:

<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 thank everyone for their help!

Answer 1

You cannot force end-user printing to print background colors. This is a printer option in the browser that can be disabled. That is why it does not work. Your nth-child selectors work fine. See screenshot below 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;
  }
 }

Answer 2

css, ( )

    //*Odd cells
    div.row:nth-child(even) div.cell {
       background-color: #000000;
       color: white;
      }

    //* Even cells
div.row:nth-child(odd) div.cell {
       background-color: #000000;
       color: white;
      }