如何更改 DataTables 中各个列的打印对齐方式？答案

【问题标题】：How do I change the print alignment for individual columns in DataTables?如何更改 DataTables 中各个列的打印对齐方式？
【发布时间】：2018-02-04 07:37:11
【问题描述】：

我能够使用自定义功能（如下所示）来修改打印布局中的对齐方式，但不幸的是，这适用于整个表格及其所有列。

如何更改各个列（我设置和选择）的打印对齐方式？

我当前的代码：

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

Jsfiddle：

https://jsfiddle.net/6724x3LL/

【问题讨论】：

标签： javascript css printing datatables alignment

【解决方案1】：

首先我尝试了这个，但它似乎不起作用：

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

在 JavaScript 中使用 columnDefs 为列设置类，然后在 CSS 中设置这些类的样式仅影响 html 表格呈现器本身，CSS 不会被转移到打印布局中。

但是我能够找到解决方案。

通过在打印的自定义选项中使用此脚本代码：

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

每列将设置第 n 个子项。

或者使用这种纯 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; }

【讨论】：