NetSuite Advanced PDF 商品列表行交替背景色设置咨询

算力阿峰

2026-7-2

商品行交替背景色实现方案

实现思路

通过CSS的:nth-child()选择器实现商品行的交替背景色，同时用:not(:last-child)排除最后一行的配送行，确保它不参与交替规则。

代码示例

场景1：商品行与配送行有独立类名

假设你的HTML结构如下：

<table class="order-table">
  <tr class="product-row">商品行1</tr>
  <tr class="product-row">商品行2</tr>
  <tr class="product-row">商品行3</tr>
  <tr class="shipping-row">配送行</tr>
</table>

对应的CSS：

/* 奇数商品行背景白色 */
.order-table .product-row:nth-child(odd) {
  background-color: #ffffff;
}

/* 偶数商品行背景浅灰色 */
.order-table .product-row:nth-child(even) {
  background-color: #f0f0f0;
}

/* 配送行单独设置样式，不参与交替 */
.order-table .shipping-row {
  background-color: #e8e8e8; /* 可自定义颜色 */
}

场景2：商品行与配送行共用类名

如果所有行都使用同一个类名，仅最后一行是配送行：

<div class="order-container">
  <div class="row">商品行1</div>
  <div class="row">商品行2</div>
  <div class="row">商品行3</div>
  <div class="row">配送行</div>
</div>

对应的CSS：

/* 排除最后一行的商品行，设置交替背景 */
.order-container .row:not(:last-child):nth-child(odd) {
  background-color: #ffffff;
}

.order-container .row:not(:last-child):nth-child(even) {
  background-color: #f0f0f0;
}

/* 配送行样式 */
.order-container .row:last-child {
  background-color: #e8e8e8;
}