使用引导打印HTML表格背景色_Html_Css_Twitter Bootstrap

使用引导打印HTML表格背景色

html css twitter-bootstrap

使用引导打印HTML表格背景色,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,如果在表上使用引导table类，则打印预览不会显示tr的背景色我的代码 <head>   <style type="text/css"> @media print { .bg-danger { background-color: #f2dede !important; }

如果在表上使用引导

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>

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

有这样一个，它强迫颜色…据说是铬的

-webkit-print-color-adjust

它被列为仅对chrome的错误支持，而在其他浏览器中不受支持。

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

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

像他们那样编写覆盖，你应该可以很好地执行。

我使用了一个表格的第th行标题，并将其样式设置为这样

.table th {
        background-color: #2D3347 !important;
        color: #fff !important
    }

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

<style>
@media print {
   .table td.cell {
     background-color: blue !important;
   }
}
</style>

<table class="table">
  <tr>
    <td class="cell">TR 1</td>
  </tr>
</table>


@媒体印刷品{
.表td.cell{
背景色：蓝色！重要；
}
}
TR 1

添加到@Ted的答案中，以下内容将覆盖默认引导

背景色！重要

规则：

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

将表格类替换为表格打印

通过使用这个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;
}

已检查打印背景的My IE设置。Bootstrap显式地将打印背景设置为白色——这是在他们的CSS中：

@media print{.table td、.table th{background color:#fff！important；}

。像他们一样编写覆盖。好吧，我现在无法回答我的问题…但是@Ted你的解决方案有效！！我覆盖了

tr

，但我没有考虑

td

。谢谢我在

打印

部分添加了

.table td{背景色：透明！重要；}

。不用担心，很高兴我能帮忙：）@Ted想把你的评论转换成答案吗？重新打开问题：）但是

div

元素打印得很好。如果我删除

class=“table”

，我的表打印效果良好。只有当我使用

class=“table”

时才会出现问题。我不能使用Chrome，我的页面显示在使用IES的WPF WebBrowser组件中，因此最好的答案是编辑引导文件并删除！重要（无论在哪里！-只有在需要时才使用它-不要“如果你遵循我的风格，那么无论出于什么原因更改它都是不好的，所以我将强制你使用！无论在哪里都重要！）-或者选项2，使用！重要的是你的所有代码，以覆盖他们的过度使用！重要吗？是否有一个简单的文件，我不能包括得到这个，还是我真的要黑客它？我试图得到一个页面打印像一个表单，我正在复制-所以我想简单地能够在屏幕上查看什么是要打印。Div不是白色的，表不是白色的，图像显示的背景是我在Div中设置的。而且不必编辑所有内容并输入500！重要和覆盖一切打印！

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