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

Question

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

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

我当前的代码:

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

Jsfiddle:

https://jsfiddle.net/6724x3LL/

Answer 1

首先我尝试了这个，但它似乎没有用:

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

使用 columnDefs 在 JavaScript 中为列设置类，然后在 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; }