css - 在 pdf 中让交替行成为不同的颜色
问题描述
我创建了一个 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>
解决方案
我面临同样的问题,但我解决了这个问题。让我们来看看
.table-bordered tr:nth-child(even) {background-color: #f2f2f2;}
我正在使用表格而不是 div。如果可能的话,我建议你使用表格。PDF 不支持任何类而不是tr:nth-child
推荐阅读
- pyspark - 在 Pyspark 的数据框中添加每组总数作为新行
- arrays - 将布尔数组作为函数输入传递时初始化器值过多
- python - 有没有办法在划分列表后只接受整数值?已回答
- python - 试图计算文本文件的每一行中有多少个数字
- php - cant parse DateTime::__construct()
- html - Rmarkdown“保存”html页面的确切位置
- excel - 在 Excel 2019 中使用 VBA 生成带有国家符号的文本时出现问题
- android - C++ 防止链接器丢弃函数
- arrays - Jmeter - ArrayList 中的 JSON 响应操作附加节点
- python-3.x - 使用 wfdb 进行心电图信号 QRS 检测