CODEWITHSUNDEEP
cssprintingmediacss-selectors
user3277801
user3277801

Reputation: 77

nth-child() not displaying in print media

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!

Upvotes: 6

Views: 4878

Answers (3)

Behnam Eskandari
Behnam Eskandari

Reputation: 1041

You can force the print view to use exact colors by adding this code to your style:

 body{ 
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

Upvotes: 0

Nic
Nic

Reputation: 81

you can have this css code to customize the background of rows one in one way and the one before in another way (even and odd rows)

    //*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;
      }

Upvotes: -1

JohanVdR
JohanVdR

Reputation: 2878

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;
  }
 }

print preview

Upvotes: 6

Related Questions