In màu nền bảng HTML bằng Bootstrap

Nếu tôi sử dụng lớp Bootstrap table trên bàn, xem trước bản in không hiển thị màu nền cho tr.In màu nền bảng HTML bằng Bootstrap

Mã của tôi

<head> 
    <!-- All Bootstrap's stuff ... --> 

    <!-- My custom style --> 
    <style type="text/css"> 
    @media print { 
     .bg-danger { 
     background-color: #f2dede !important; 
     } 
    } 
    </style> 
</head> 
<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>

Trên màn hình, tất cả là màu đỏ nhưng khi xem trước chỉ in các yếu tố div là màu đỏ.

Nếu tôi xóa lớp table, mọi thứ đều hoạt động (ngoại trừ tôi cần kiểu bảng).

Cấu hình của tôi: IE11 và Windows 7.

Có mẹo nào để in màu nền không?

Lưu ý: Bản sao được chỉ định (CSS @media print issues with background-color;) không phải là vấn đề ở đây, cài đặt của tôi được chọn để in màu nền. Ngoài ra, tôi có thể in màu cho một số yếu tố khác là khác.

Trả lời:

Nhờ comments @Ted, tôi overrided td phong cách cho table lớp:

<style type="text/css"> 
    @media print { 
    .bg-danger { 
     background-color: #f2dede !important; 
    } 

    .table td { 
     background-color: transparent !important; 
    } 
    } 
</style>

Nguồn

2015-04-10 JTE

Cài đặt của tôi IE cho nền in ấn đã được kiểm tra. – JTE

Bootstrap rõ ràng đặt nền thành màu trắng để in - đây là trong CSS của họ: '@media print { .table td, .table th { màu nền: #fff! Quan trọng; } } '. Viết ghi đè của bạn như của họ. – Ted

Ok Tôi không thể trả lời câu hỏi của tôi ngay bây giờ ... Nhưng @Ted giải pháp của bạn hoạt động !! Tôi đã ghi đè '' tr'' nhưng tôi không nghĩ đến '' td''. Cảm ơn !!! Tôi đã thêm '' .table td {background-color: transparent! } '' trong phần '' in''. – JTE

Bootstrap rõ ràng đặt nền sang màu trắng để in - đây là trong CSS của họ:

@media print { 
    .table td, .table th { 
     background-color: #fff !important; 
    } 
}

Viết ghi đè của bạn như họ và bạn sẽ được tốt để đi.

Nguồn

2015-04-10 15:31:10 Ted

Vì vậy, câu trả lời hay nhất là chỉnh sửa tệp bootstrap và xóa phần tử quan trọng (everwhere!) - nó chỉ được sử dụng nếu được yêu cầu - không để 'gee nếu bạn làm theo phong cách của tôi sau đó thay đổi nó vì lý do nào là xấu, vì vậy tôi sẽ buộc bạn phải sử dụng! quan trọng ở khắp mọi nơi!) - Hoặc tùy chọn 2, sử dụng quan trọng trên tất cả các mã của bạn để ghi đè lên của họ hơn sử dụng !Quan trọng? Có một tập tin đơn giản tôi chỉ có thể không bao gồm để có được điều này hoặc tôi thực sự phải hack nó? –

Tôi đang cố gắng để có được một trang để in như một hình thức mà tôi đang nhân bản - vì vậy tôi muốn chỉ đơn giản là có thể xem trên màn hình những gì sẽ in. Div không phải là màu trắng, các bảng không màu trắng, hình ảnh hiển thị với nền tôi đặt trong Div. Và không phải chỉnh sửa tất cả mọi thứ và đưa vào 500! Nhập khẩu và ghi đè mọi thứ để in! –

Không có. Theo mặc định, chúng không in. Đó là một lựa chọn trình duyệt mà không thể được khắc phục bằng CSS/JS, vv

Có LÀ này, trong đó buộc màu sắc ... bị cáo buộc trong Chrome

-webkit-print-color-adjust

nào được liệt kê như hỗ trợ Buggy CHỈ cho chrome, và không được hỗ trợ trong các trình duyệt khác.

Nguồn

2015-04-10 14:09:47

Nhưng phần tử '' div'' đang in tốt. Và nếu tôi loại bỏ '' class = "table" '', bảng của tôi đang in tốt. Chỉ có một vấn đề nếu tôi sử dụng '' class = "table" ''. – JTE

Tôi không thể sử dụng Chrome, trang của tôi được hiển thị trong thành phần WPF WebBrowser sử dụng IE – JTE

tôi đã sử dụng một bảng thứ dòng tiêu đề và kiểu nó như thế này

.table th { 
     background-color: #2D3347 !important; 
     color: #fff !important 
    }

Nguồn

2017-10-16 16:28:55 tfa

Tôi nghĩ rằng cách tốt hơn là sử dụng cụ thể hơn css selector

<style> 
@media print { 
    .table td.cell { 
    background-color: blue !important; 
    } 
} 
</style> 

<table class="table"> 
    <tr> 
    <td class="cell">TR 1</td> 
    </tr> 
</table>

Nguồn

2018-02-01 09:37:38 pszafer

In màu nền bảng HTML bằng Bootstrap

Trả lời

Các vấn đề liên quan