jquery - 数据表中的@Media打印类

Question

为什么我添加 text-align 的 class 在 @media print 上不起作用？

我做了一个EXAMPLE PLUNKER

我希望当用户单击打印按钮时，右侧元素保持在右侧

风格

@media print {
  td.text-right-print {
    text-align: right!important
  }
}

塔贝拉

  <table class="table" id="example">
    <thead>
      <tr>
        <th>Left Thead</th>
        <th>Right Thead</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Left Element</td>
        <td align="right" class="text-right-print">Right Element</td>
      </tr>
      <tbody>
  </table>

谢谢!

Answer 1

您可以使用jquery datatable的customize方法。

$(document).ready(function() {
      $('#example').DataTable({
        dom: 'Bfrtip',
        buttons: [
         {
                extend: 'print',
                customize: function ( win ) {
                    $(win.document.body).find('table tr td:nth-child(2)')
                        .addClass('rightAlign');
                }
            }
        ]
      });
    });

EXAMPLE PLUNKER

请访问以下链接了解更多信息:

DataTable Print Customization