车把 - table 上的自定义 CSS 不工作

Question

我正在研究应用于 Handlebars express table 的 CSS。

这是我的 hbs 模板，用于显示我的 table。

<div class="table-1">
    <table class="table" cellspacing="0">
       <tr>
           <th class="left">Item No</th>
           <th class="left">Description</th>
           <th class="left">Qty</th>
           <th class="left"> Unit </th>
           <th class="left">Prix</th>
           <th class="left">Discount</th>
           <th class="left">VAT</th>
           <th class="left">Total</th>
      </tr>
      <tr>
           <td> 0000 </td>
           <td> Description </td>
           <td> 0 </td>
           <td> unit </td>
           <td> 0.00 </td>
           <td> 0 % </td>
           <td> 0% </td>
           <td> 0.00 </td>
     </tr>
     <tr>
           <td> 0000 </td>
           <td> Description </td>
           <td> 0 </td>
           <td> unit </td>
           <td> 0.00 </td>
           <td> 0 % </td>
           <td> 2.5% </td>
           <td> 0.00 </td>
     </tr>
     <tr style="width: 100%;">
           <td colspan="4"></td>
           <td colspan="3"> Total gross</td>
           <td> 0.00 </td>
     </tr>
     <tr>
           <td colspan="4"></td>
           <td colspan="3"> Discount </td>
           <td> 0.00 </td>
     </tr>
           <tr>
           <td colspan="4"></td>
           <td colspan="3"> Total Amt </td>
           <td> 0.00 </td>
     </tr>
    </table>
</div>

这是我的 css,

<!DOCTYPE html>
<html>

<head>
    <style>
        .table-1 .left {
            text-align: left;
        }

        .table-1 .table td,
        .table-1 .table th {
            border: none;
            font-weight: 300;
        }

        .table-1 tr:nth-child(odd) {
            background-color: #EEEEEE;
        }

        .table-1 th,
        .table-1 tr:last-child {
            background-color: #16e0bb;
            color: #FFFFFF;
        }

        .table-1 tr:last-child>td {
            font-weight: 700 !important;
        }
   </style>
    <meta charset="utf-8">
</head>

<body>
    {{{body}}}
</body>

</html>

问题：使用 Handlebars express 呈现 PDF 模板时，CSS 未正确应用。即使内联 css 也不起作用，尤其是 使用 HEX 颜色代码时 。

看来，背景色css 根本不起作用。还有什么其他方法可以在 table 上应用背景色 css？为了呈现 pdf，我使用了 Handlebars express、puppeteer 和 NodeJS。

预期输出：

实际输出：

Answer 1

能够解决上述问题。

解决方案：在使用 Puppeteer 和 NodeJS 从 HTML 生成 PDF 之前，应在 PDF 选项中包含 'printBackground: true'。

谢谢

车把 - table 上的自定义 CSS 不工作

Handlebars - custom CSS on table not working

css

node.js

handlebars.js

puppeteer