数据表中的@Media打印类

Question

为什么我的class添加text-align无效@media print？

我做了EXAMPLE PLUNKER

当用户点击Right Element按钮

时，我希望Print保持正确

风格

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

Tabela

  <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