在 pdf 中让交替行成为不同的颜色答案

【问题标题】：Getting alternate rows to be different colors in a pdf在 pdf 中让交替行成为不同的颜色
【发布时间】：2019-09-12 23:26:09
【问题描述】：

我已经创建了一个 pdf，现在我正在尝试设置它的样式。我在大多数情况下都取得了成功，但我无法让我的行变成不同的颜色。我想要发生的是，每一奇数行都需要某种颜色。我也无法让我的字体也能正常工作，我不明白为什么。

我也在使用 laravel 和 barryvdh/laravel-dompdf 来创建我的 pdf。

这是我的pdf文件

<html style="margin: 0; padding: 0;">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>{{ $order->invoice_number }}</title>

        <style>
            body{
                font-family: Arial;
            }

            .invoice_table .table {
                display: table;
                width: 100%;
            }

            .invoice_table .table .thead {
                display: table-header-group;
            }

            .invoice_table .table .tr {
                display: table-row;
            }

            .invoice_table .table .thead .tr .th {
                display: table-cell;
            }

            .invoice_table .table .thead .th {
                padding: 13px 0 12px;
            }

            .invoice_table .table .tbody {
                display: table-row-group;
            }

            /* CODE TO MAKE THE ROWS A DIFFERENT COLOUR */
            .invoice_table .table .tbody .tr:nth-child(odd){
                background-color: #4C8BF5;
                color: #fff;
            }

            .invoice_table .table .tr .td {
                display: table-cell;
            }

            .invoice_table .table .tbody .td {
                padding: 20px 0;
            }
        </style>
    </head>

    <body style="margin: 0; padding: 0;">
        <div class="invoice_table" style="width: 700px; margin: 30px auto;">
            <div class="table" style="border: 1px solid #000;">
                <div class="thead" style="border: 1px solid #000;">
                    <div class="tr" style="border: 1px solid #000;">
                        <div class="th"></div>
                        <div class="th" style="border: 1px solid #000;">Description</div>
                        <div class="th" style="text-align: center; border: 1px solid #000;">Qty</div>
                        <div class="th" style="text-align: center; border: 1px solid #000;">Unit Price</div>
                        <div class="th" style="text-align: center; border: 1px solid #000;">Total Price</div>
                    </div>
                </div>

                <div class="tbody">
                    @foreach($order_item->items as $item)
                        <div class="tr">
                            <div class="td"></div>
                            <div class="td" style="border: 1px solid #000;">
                                {{ $item['item']['title'] }}
                            </div>
                            <div class="td" style="text-align: center; border: 1px solid #000;">
                                {{ $item['qty'] }}
                            </div>
                            <div class="td" style="text-align: center; border: 1px solid #000;">
                                R {{ $item['item']['price'] }}
                            </div>
                            <div class="td" style="text-align: center; border: 1px solid #000;">
                                R {{ $item['price'] }}
                            </div>
                        </div>
                    @endforeach

                    <div class="tr">
                        <div class="td" rowspan="3" colspan="3" style="padding: 50px 0 5px 0; border: 1px solid #000;"></div>
                        <div class="td" style="text-align: right; padding: 50px 0 5px 0; border: 1px solid #000;">
                            SUBTOTAL:
                        </div>
                        <div class="td" style="text-align: center; padding: 50px 0 5px 0; border: 1px solid #000;">
                            R {{ $order_item->totalPrice }}
                        </div>
                    </div>

                    @if(!empty($order->delivery_fee))
                        <div class="tr">
                            <div class="td" style="text-align: right; padding: 0 0 5px 0; border: 1px solid #000;">
                                DELIVERY FEE:
                            </div>
                            <div class="td" style="text-align: center; padding: 0 0 5px 0; border: 1px solid #000;">
                                R {{ $order->delivery_fee }}
                            </div>
                        </div>
                    @endif

                    <div class="tr">
                        <div class="td" style="text-align: right; padding: 0; border: 1px solid #000;">
                            TOTAL:
                        </div>
                        <div class="td" style="text-align: center; padding: 0; border: 1px solid #000;">
                            R {{ $order->order_price }}
                        </div>
                    </div>
                </div>
            </div>
        </div>  
    </body>
</html>

【问题讨论】：

这不是 pdf 而是 HTML 肯定有一些你显然缺少的东西来解释你使用什么库来从那个 HTML 生成 PDF
我正在使用 laravel，我使用 barryvdh/laravel-dompdf 创建 pdf
与其在评论中编辑您的问题并放入此信息，这是人们帮助您的重要信息。您可能还想在您的问题中添加相关标签，例如 laravel
当然。我已经更新了我的问题
恕我直言 barryvdh/laravel-snappy 更好更快地进行 html 到 pdf 的转换

标签： css laravel

【解决方案1】：

我遇到了同样的问题，但我解决了这个问题。让我们看看

.table-bordered tr:nth-child(even) {background-color: #f2f2f2;}

我使用的是表格而不是 div。如果可能的话，我建议你使用表格。 PDF 不支持任何类而不是 tr:nth-child

【讨论】：

完美，这对我有用！非常感谢。

【解决方案2】：

你可以试试下面的css来实现。

.invoice_table .table .tbody tr:nth-child(even) {background: #CCC}
.invoice_table .table .tbody tr:nth-child(odd) {background: #FFF}

【讨论】：