打印引导条纹表答案

【问题标题】：Print bootstrap striped table打印引导条纹表
【发布时间】：2023-03-24 08:20:01
【问题描述】：

我正在创建一个包含条纹表的报告。我需要用条纹线打印表格。

我正在使用引导程序 3.3.6。

我做到了：

@media print {    
    .table.table-striped td:nth-of-type(odd) {
        background-color: #f9f9f9 !important;
        -webkit-print-color-adjust: exact; 
    }
}

但它不起作用。

如果我切换到条带化列 (tr)，则可以。对不起英文，我正在使用翻译。

【问题讨论】：

仅供参考，<tr> 是表行而不是列
看，我打印的是蓝色，但不是红色线条。 jsfiddle.net/pfdiass/1kvmjwxa/2
我只想要红色的线条。蓝色是为了说明我到目前为止所得到的。
你想要的是this吗？
@Meeseeks 就是这样！太感谢了！我放了 -webkit-print-color-adjust 来强制显示颜色。 jsfiddle.net/pfdiass/1kvmjwxa/5

标签： twitter-bootstrap css twitter-bootstrap-3

【解决方案1】：

2020-11 - 引导 4.5.0

唯一有效的是将背景添加到td insted of tr。
在 Chrome、Vivaldi 和 Puppeteer 中测试

.table-striped tbody tr:nth-of-type(odd) td {
    background-color: rgba(0, 0, 0, .05)!important;
}

【讨论】：

【解决方案2】：

您不能强制打印背景颜色。浏览器需要打开该选项。想法是您无需为他们的打印机墨水付费。

/* 编辑：4 月 20 日 */ 我遇到了同样的问题，一位队友向我展示了 -webkit-print-color-adjust:exact;规则。我说错了，这是可能的。看起来@mr-meeseeks 应该在 cmets 中为他们的答案得分。

【讨论】：

我需要它，因为这是客户要求。表格有很多行和着色线便于查看报告。
蓝色是为了说明我得到了什么。
不正确，您可以使用 CSS 媒体查询 @media print 设置背景颜色。

【解决方案3】：

我遇到了同样的问题，我通过以下文章解决了它：https://www.api2pdf.com/solved-bootstrap-striped-table-not-printing-to-pdf/

代码：

@media print {
   tr:nth-child(even) td {
       background-color: red !important;
        -webkit-print-color-adjust: exact;
   }
}

【讨论】：

文章的链接很好，但您不应该假设该站点将始终运行。重要的是要包含使它起作用的摘要。