使用 Bootstrap 打印 HTML 表格背景顏色
[英]Print HTML table background color with Bootstrap
問題描述
如果我在表格上使用 Bootstrap table class，打印預覽不會顯示tr的背景顏色。
我的代碼
@media print {.bg-danger { background-color: #f2dede;important; } }
<body> <div class="bg-danger"> <td>DIV</td> </div> <table class="table"> <tr class="bg-danger"> <td>TR 1</td> </tr> <tr class="danger"> <td>TR 2</td> </tr> <tr style="background-color: #f2dede;important;"> <td>TR 3</td> </tr> </table> </body>
在屏幕上，一切都是紅色的，但在打印預覽中只有div元素是紅色的。
如果我刪除table class，一切正常（除了我需要表格樣式）。
我的配置：IE11 和 Windows 7.
有打印背景顏色的技巧嗎？
注意：指示的副本（ CSS @media print issues with background-color; ）不是這里的問題，我的設置被檢查為打印背景 colors。此外，我可以為其他幾個元素打印顏色。
回答：
感謝@Ted 的評論，我覆蓋了table class 的td樣式：
<style type="text/css">
@media print {
.bg-danger {
background-color: #f2dede !important;
}
.table td {
background-color: transparent !important;
}
}
</style>
7 個解決方案
解決方案1
35 已采納 2015-04-10 15:31:10
Bootstrap 顯式地將背景設置為白色以進行打印——這在他們的 CSS 中：
@media print {
.table td, .table th {
background-color: #fff !important;
}
}
像他們一樣寫你的覆蓋，你應該很高興。
解決方案2
2 2018-04-28 16:14:11
添加到@Ted 的答案中，以下內容將覆蓋默認的引導程序background-color !important規則：
@media print {
table tr.highlighted > td {
background-color: yellow !important;
}
}
解決方案3
1 2015-04-10 14:09:47
那沒有。 默認情況下，它們不打印。 這是 CSS/JS 等無法克服的瀏覽器選項。
有這個，它強制顏色......據稱在 Chrome 中
-webkit-print-color-adjust
哪個被列為 BUGGY 支持，僅適用於 chrome，其他瀏覽器不支持。
解決方案4
1 2020-05-14 13:37:24
將table類替換為table-print
通過使用此 CSS 代碼
.table-print {
width: 100%;
margin-bottom: 1rem;
color: #212529;
}
.table-print thead th {
vertical-align: bottom;
border-bottom: 2px solid #dee2e6;
}
.table-print th, .table-print td {
padding: 0.75rem;
vertical-align: top;
border-top: 1px solid #dee2e6;
}
.table-print .thead-dark th {
color: #fff;
background-color: #343a40;
border-color: #454d55;
}
解決方案5
0 2017-10-16 16:28:55
我使用了一個表格標題行並像這樣設置了它的樣式
.table th {
background-color: #2D3347 !important;
color: #fff !important
}
解決方案6
0 2018-02-01 09:37:38
我認為更好的方法是使用更具體的 css 選擇器
<style>
@media print {
.table td.cell {
background-color: blue !important;
}
}
</style>
<table class="table">
<tr>
<td class="cell">TR 1</td>
</tr>
</table>
解決方案7
0 2023-01-17 04:29:53
我在這里（以及許多其他問題）嘗試了所有建議的解決方案，例如 applied background-color: #000;important; 在樣式表和內聯中，或設置
@media print {
* {
color-adjust: exact !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
}
，甚至將它們組合在一起，但沒有任何效果。
正如您在上面所說的，除了<table>之外，一切正常，所以最簡單的技巧是用<div>包裹<th>或<td>內的任何內容（您可以調整填充以使其顯示與之前相同）。
例如
...
<th><div>Col title here...</div></th>
...
<td><div>Content here...</div></td>
...
對我來說，這個“ hack ”解決了問題。
希望這有幫助！
如何避免HTML表格背景色跨越打印頁面？
[英]How to avoid HTML table background color from spanning across pages on print?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.