数据表中的@Media 打印类

Question

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

我发了EXAMPLE PLUNKER

当用户点击Print 按钮时，我希望Right Element 保持正确

风格

@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数据表的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