Is it possible to use colvis with print in a way that will preserve the styling?
Is it possible to use colvis with print in a way that will preserve the styling?
Using the columnDefs option, I am able to assign classNames, then I am able to style the table using CSS, and the result shows up as expected to the viewer, but isn't carried on towards print.
"columnDefs": [
{ className: "col_1", "targets": [0] },
{ className: "col_2", "targets": [1] },
{ className: "col_3", "targets": [2] }],
https://jsfiddle.net/nq7n5kto/
I also tried assigning classNames to the columns option instead, but no change in results. Here the print button also gives an output that is stripped of styling as well:
var columns = [
{"data": "company", "title": "Company", "className": "col_1"},
{"data": "violations","title": "Claims", "className": "col_2"},
{"data": "total-award","title": "Total Awarded","className": "col_3"} ];
https://jsfiddle.net/2e1zmhm7/
I was however, able to carry forward the styling using the nth child selector:
.dataTable tbody td:nth-child(1) {
text-align: left;
direction: ltr;
text-decoration: underline;}
.dataTable tbody td:nth-child(2) {
text-align: center;
color: blue;
font-weight: bold;}
.dataTable tbody td:nth-child(3) {
text-align: right;
direction: ltr;
color: red;
font-style: italic;
text-decoration: overline}
But the problem however, is that this method muddles up the styling if I use the column visibility control 'colvis' to hide a column before the print. The nth child changes and so does the styling.
https://jsfiddle.net/akhvon60/
Is there a way to use colvis with print in a way that will preserve the styling?