Comment modifier l'alignement d'impression pour des colonnes individuelles dans DataTables?

Question

J'ai été en mesure d'utiliser la fonction de personnalisation (donnée ci-dessous) pour modifier l'alignement dans la mise en page d'impression, mais cela s'applique malheureusement à l'ensemble de la table et à toutes ses colonnes. Comment modifier l'alignement d'impression des colonnes individuelles (que j'ai définies et choisies)?

Mon code actuel:

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

jsFiddle:

https://jsfiddle.net/6724x3LL/

Answer 1

D'abord, j'essayé et il ne semble pas fonctionner:

Js

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

CSS

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

Définition des classes pour les colonnes en utilisant JavaScript columnDefs, puis styling ensuite ces classes en CSS Concerné uniquement le tableau html se rend, le CSS n'a pas été reporté à la mise en page d'impression.

Cependant, j'ai été en mesure de trouver une solution à cela.

En utilisant ce code de script au sein de l'option de personnalisation de l'impression:

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

chaque colonne serait réglée avec l'enfant n-ième.

Ou bien utiliser cette méthode pure CSS:

.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; }