nth-child（）未在打印介质中显示

Question

忽略由divs制成的表格（相信我，我已经进行过关于功能的讨论），我很难获得交替的行背景色来查看打印介质。这是我所拥有的：

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

而我的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;
}
}

我感谢大家的帮助！

Answer 1

您不能强制打印最终用户打印背景颜色。这是浏览器中的打印机设置，可以关闭。这就是为什么它不起作用。你的 nth-child 选择器工作得很好。请参阅下面的打印预览屏幕截图。

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