Question

如果我在表格上使用Bootstrap table类，则打印预览不会显示tr的背景颜色。

我的代码

<head>
  <!-- All Bootstrap's stuff ... -->

  <!-- My custom style -->
  <style type="text/css">
    @media print {
      .bg-danger {
        background-color: #f2dede !important;
      }
    }
  </style>
</head>
<body>
  <div class="bg-danger">
    <td>DIV</td>
  </div>

  <table class="table">
    <tr class="bg-danger">
      <td>TR 1</td>
    </tr>
    <tr class="danger">
      <td>TR 2</td>
    </tr>
    <tr style="background-color: #f2dede !important;">
      <td>TR 3</td>
    </tr>
  </table>
</body>

在屏幕上，全部为红色，但在打印预览中，只有div元素为红色。

如果删除table类，一切正常（除了我需要表样式）。

我的配置：IE11和Windows 7。

是否有打印背景颜色的技巧？

注意：指示的副本（CSS @media print issues with background-color;）不是问题，我的设置会被检查以打印背景颜色。另外，我可以为几个其他元素打印颜色。

答案：

感谢@Ted评论，我为td课程覆盖了table样式：

<style type="text/css">
  @media print {
    .bg-danger {
      background-color: #f2dede !important;
    }

    .table td {
      background-color: transparent !important;
    }
  }
</style>

Answer 1

Bootstrap显式地将背景设置为白色以进行打印 - 这是在他们的CSS中：

@media print { 
    .table td, .table th { 
        background-color: #fff !important; 
    } 
}

写下你的覆盖，就像他们一样，你应该好好去。

Answer 2

没有。默认情况下，他们不打印。它是一个无法通过CSS / JS等克服的浏览器选项。

有这个，它强迫颜色...据称在Chrome中

-webkit-print-color-adjust

仅针对chrome列出BUGGY支持，其他浏览器不支持。

Answer 3

添加@Ted的答案，以下内容将覆盖默认的bootstrap background-color !important规则：

@media print {
    table tr.highlighted > td {
        background-color: yellow !important;
    }
}

Answer 4

将表格类替换为表格打印

通过使用此CSS代码

.table-print {
    width: 100%;
    margin-bottom: 1rem;
    color: #212529;
}

    .table-print thead th {
        vertical-align: bottom;
        border-bottom: 2px solid #dee2e6;
    }

    .table-print th, .table-print td {
        padding: 0.75rem;
        vertical-align: top;
        border-top: 1px solid #dee2e6;
    }
 .table-print .thead-dark th {
    color: #fff;
    background-color: #343a40;
    border-color: #454d55;
}

Answer 5

我使用了一个表格标题行并像这样设置了它

ftp

Answer 6

我认为更好的方法是使用更具体的css选择器

def _no_value():
    questions = Question.objects.all()
    for question in questions:
        regex = re.compile('(__[_]*)')
        no_value = (regex.findall(question.question))
        if no_value:
            value = len(no_value)
            question.no_value(value)
            question.save()

使用Bootstrap打印HTML表格背景颜色

6 个答案: