css – nth-child()未在打印介质中显示

2023年11月6日 178次阅读

忽略由div组成的表(相信我,我已经与权力进行了讨论),我无法获得交替的行背景颜色来查看我的打印介质.这是我得到的：

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

我感谢大家的帮助！

最佳答案 您无法强制打印最终用户以打印背景颜色.这是浏览器中的打印机设置,可以关闭.这就是为什么它不起作用.

你的n-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;
  }
 }
点赞