I was able to right align my print layout, how do I apply that to individual columns?

hm123

I used customize to modify the print layout. This applies to the whole table. How do I apply this to individual columns?

My current code:

customize: function (win){
$(win.document.body).find('table').css('text-align', 'right');            
},

https://jsfiddle.net/6724x3LL/

hm123

First I tried this and it did not seem to work:

"columnDefs": [ { className: "col_1", "targets": [0] },
       { className: "col_2", "targets": [1] },
       { className: "col_3", "targets": [2] } ]

.dataTable tbody td.col_1 {
    text-align: right;}
.dataTable tbody td.col_2 {
    text-align: center;}
.dataTable tbody td.col_3 {
    text-align: left;}

Setting classes for the columns in JavaScript using columnDefs, and then subsequently styling those classes in CSS only affected the html table render itself, the CSS was not carried over to the print layout.

However I was able to find a solution to this.

By using this script code within the customize option of print:

customize: function (win){ 
$(win.document.body).find('table tbody td:nth-child(1)').css('text-align', 'right');

Where each column would be set with the nth child.

Or alternatively use this pure CSS method:

.dataTable tbody tr td:nth-child(1)  {
    text-align: right;}
.dataTable tbody tr td:nth-child(2)  {
    text-align: center; } 
.dataTable tbody tr td:nth-child(3)  {
    text-align: left; }

allan

The pure CSS method appears to work okay: https://jsfiddle.net/6724x3LL/4/ .

Interestingly it appears that the classes from columns.className are not carried over to the print table. I think that's wrong and I'll get that corrected.

Thanks,
Allan

allan

Fix committed here and will be in the next release.

Allan