【问题标题】:CSS How to print a table with background color (without Print settings changes)CSS 如何使用背景颜色打印表格(无需更改打印设置)
【发布时间】:2011-07-03 21:47:36
【问题描述】:

目的是打印带有彩色 td-s 的表格。 我需要一种适用于所有类型浏览器的方法。

有什么办法吗?

【问题讨论】:

  • 我相当肯定大多数浏览器默认不打印背景。当您只是从 HTML 打印时,您无法更改它。您可以将其转换为 PDF,但我不知道这对您是否可行。
  • 这可能会有所帮助:stackoverflow.com/questions/764520/…
  • 这应该不再是问题了。我遇到这个问题是因为我有一个引导页面,并且引导程序有一个 @media print 查询,它从表格中删除背景颜色(例如条纹)。
  • @maria Firefox 和 Chrome 现在都提供了选项(即在 2018 年)Print Background ColorBackground graphics 分别现在简单地完成工作。当这些选项被禁用时,所有 CSS 选项都变得无用。

标签: css html-table


【解决方案1】:

通过设置背景图像和 !important 将类应用于背景。该方法不需要设置后台打印。

HTML

CSS

.red { background-image: url('images/bg-red.jpg') !important; }

【讨论】:

    【解决方案2】:

    我需要在从 python 生成 pdf 的 weasyprint 库中使用它。如果您只想打印 pdf,请使用带有 !important 的 @print 属性

    例如

    <!DOCTYPE html>
    <html>
        <head>
            <style>
                @media print {
                    .a {
                        background: orange !important;
                    }
                    .b {
                        background: blue !important;
                    }
                }
            </style>
        </head>
    
        <body>
    
            <table>
                <tr>
                    <td class="a">This cell has an orange background.</td>
                    <td class="b">This cell has a green background.</td>
                </tr>
            </table>
        </body>
    
    </html>
    

    您会注意到,如果您在网络浏览器中打开它,您将看不到颜色,如果您将其打印为 pdf,您就会看到。因为这些样式应用于打印

    如果您还想在浏览器中查看颜色,您可以在打印之外添加与正常样式相同的样式

    <!DOCTYPE html>
    <html>
        <head>
            <style>
                    .a {
                        background: orange;
                    }
                    .b {
                        background: blue;
                    }
    
                @media print {
                    .a {
                        background: orange !important;
                    }
                    .b {
                        background: blue !important;
                    }
                }
            </style>
        </head>
    
        <body>
    
            <table>
                <tr>
                    <td class="a">This cell has an orange background.</td>
                    <td class="b">This cell has a green background.</td>
                </tr>
            </table>
        </body>
    
    </html>
    

    要打印 PDF,您只需要 @print 属性

    【讨论】:

      【解决方案3】:

      对于 chrome,你可以使用这个:

      -webkit-print-color-adjust:exact;
      

      或者在打印预览中,设置复选框更多设置->背景图形

      对于 Firefox,您无法使用任何 CSS 启用它。您可以按如下方式启用它(如果看不到文件,请按 Alt 键一次)。 文件->页面设置并设置复选框打印背景(颜色和图像)

      【讨论】:

        【解决方案4】:

        这个愚蠢的解决方案在 Firefox 和 Chrome (Ubuntu) 上对我有用。

        Firefox:打开打印对话框(快捷键:Ctrl+P)并转到Options标签, 并确保勾选了Print Background Colors 选项。

        Chrome:打开打印对话框(快捷键:Ctrl+P)展开More settings,勾选Background graphics

        就我的测试而言,-webkit-print-color-adjust:exact; 不适用于 Firefox,但在 Chrome 中可以使用。但是在这两种浏览器中,最终的打印选项都会覆盖所有这些。 所以你可以完全不用它。

        尝试使用或不使用此处描述的各种设置打印以下示例 HTML 页面,您就会知道。

        <!DOCTYPE html>
        <html>
        
        <head>
          <style>
            body {
              -webkit-print-color-adjust: exact;
            }
          </style>
        </head>
        
        <body>
          <table style="border-width:1px;width:50%;">
            <tr style="background-color:#999999">
              <td>First Row</td>
            </tr>
            <tr style="background-color:#CCCCCC">
              <td>Second Row</td>
            </tr>
          </table>
        
        </body>
        
        </html>

        【讨论】:

          【解决方案5】:

          这对我有用,不会影响您的其他 CSS 代码:

          @media print {
              div {
                 background: #333333 !important;
              }
          }
          

          【讨论】:

            【解决方案6】:

            只需在您的 CSS 中使用 !important,它就会在 Chrome 中打印出来。

            【讨论】:

            • 我在 chrome 上测试了这个。 The Row 的背景颜色内联样式设置为银色。我添加了!重要;命令在最后。对 Chrome 打印没有影响。
            • 如果用户在其打印设置中关闭了“打印背景颜色和图像”,则没有 CSS 会覆盖它,因此请始终考虑这一点。这是默认设置。
            • @BjörnC。谢谢老兄,你节省了我大量的时间。
            【解决方案7】:

            没有任何解决方案不是非常丑陋的,例如在桌子下方定位图像或大得离谱的边框。

            这取决于您需要这些背景。如果是装饰性的,最好不要强求。

            如果要突出显示某些表格单元格,除了背景之外,还可以使用颜色border。打印边框。

            如果打印背景非常重要,那么您可以给用户一个 PDF 来打印。

            【讨论】:

              【解决方案8】:

              您可以通过将内容作为提交类型的输入标签并将值设置为 John Doe 来为背景着色。然后使用类或样式来操纵着色。无论如何,浏览器会将前滤器更改为黑色,因此只使用浅色背景,但它可以工作(一点点)。

              【讨论】:

                【解决方案9】:

                对于 webkit 浏览器(Chrome 和 Safari):

                body{
                  -webkit-print-color-adjust:exact;
                }
                

                【讨论】:

                • 以上在chrome浏览器中工作。我在firefox中选择了打印背景图像和颜色复选框并检查它,它没有打印背景图像。是否可以像上面那样为firefox设置css进行打印背景图片。
                • 在Firefox等非webkit浏览器中是不可能的。
                • 现在是color-adjust:exact。无论如何,在 FF 中。
                • 我已经使用了上面的这些代码。我在发票上遇到问题。我已经为包含表格 tds 和 trs 的客户制作了动态账单,并且 bg 颜色不错,但是当我们打印时,trs 的 bg 颜色是白色的。所以为了解决这些问题,我使用了这些命令
                【解决方案10】:

                从我对此的研究来看,您不太可能找到涵盖所有内容的 CSS 解决方案。您也许可以对此应用 jQuery 解决方案。

                <style>
                .cell_pos {
                    position: relative;
                }
                .cell_cont {
                    position: absolute;
                    top: 0;
                    left: 0;
                    z-index: 10;
                }
                .img_color {
                    position: absolute;
                    top: 0;
                    left: 0;
                    z-index: 9;
                    width: 100%;
                }
                </style
                <table>
                    <tr class="row1">
                        <td class="selected">
                            <div class="cell_pos">
                                <div id="cell_cont">Hello</div>
                            </div>
                        </td>
                    </tr>
                </table>
                
                <script type="text/javascript">
                    $(document).ready(function(){
                        $('#row1 .selected).append('<img class="img_color" src="path/to/img.jpg/>');
                    )};
                </script>
                

                这个问题有点含糊,所以您可能需要使用overflow 处理css 并设置单元格/列宽。希望这会有所帮助。

                【讨论】:

                  【解决方案11】:
                              <td><img src="your_image" /></td>
                  

                  【讨论】:

                  • 为什么这不起作用?对我来说似乎是唯一可行的解​​决方案。
                  【解决方案12】:

                  我发现@willert's solution 有点一致和简单。我已经进一步开发了它,希望它可以帮助你们......

                  table {
                      margin-top: 20px;
                      border-collapse: separate;
                      border-spacing: 0px;
                      font:13px/1.5 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;
                  }
                  
                  table td,
                  table th {
                      background-color: transparent;
                      z-index: 1;
                      border-right: 0;
                      border-bottom: 0;
                      width: 150px;
                      padding-left: 5px;
                      overflow: hidden;
                      height: 12px;
                  }
                  
                  table th:before,
                  table td:before {
                      content: "";
                      padding: 0;
                      height: 1px;
                      line-height: 1px;
                      width: 1px;
                      margin: 10px -994px -996px -2px;
                      display: block;
                      border: 0;
                      z-index: -1;
                      position:relative;
                      top: -6px;
                  }
                  
                  table th:before {
                      border-top: 999px solid #D6D6D6;
                      border-left: 999px solid #D6D6D6;
                  }
                  
                  table td:before {
                      border-top: 999px solid #F9F9F9;
                      border-left: 999px solid #F9F9F9;
                  }
                  td div.grid_3{
                      overflow: hidden;
                  }
                  table .row td{
                      border-bottom: #d6d6d6 1px solid;
                      width: 110px;
                  }
                  

                  【讨论】:

                    【解决方案13】:

                    我一直在尝试解决这个问题,而 CSS 内容生成和现代浏览器似乎为这个问题提供了一个很好的解决方案。未经广泛测试,欢迎反馈!

                    table {
                      border-collapse: separate;
                      border-spacing: 0px;
                    }
                    
                    table td,
                    table th {
                        background-color: transparent;
                        overflow: hidden;
                        z-index: 1;
                        border-right: 0;
                        border-bottom: 0;
                    }
                    
                    table th:before,
                    table td:before {
                        content: "";
                        padding: 0;
                        height: 1px;
                        line-height: 1px;
                        width: 1px;
                        margin: -4px -994px -996px -6px;
                        display: block;
                        border: 0;
                        z-index: -1;
                        position:relative;
                        top: -500px;
                    }
                    
                    table th:before {
                        border-top: 999px solid #c9c9c9;
                        border-left: 999px solid #c9c9c9;
                    }
                    
                    table td:before {
                        border-top: 999px solid #eeeeee;
                        border-left: 999px solid #eeeeee;
                    }
                    

                    您需要手工制作细节以满足您的需求。

                    HTH

                    【讨论】:

                      【解决方案14】:

                      一个特别难看的解决方案是在表格单元格中放置一个 .gif(或任何形式的矢量图形,以便可以更改大小)图像,高度和宽度为 100%,然后是负 z-index 属性。

                      【讨论】:

                        【解决方案15】:

                        从这里引用:CSS @media print issues with background-color;

                        如果用户有“打印背景 颜色和图像”已关闭 他们的打印设置,没有CSS会 覆盖它,所以总是考虑 那。这是默认设置。

                        一旦设置好,它就会打印出来 背景颜色和图像,什么 你在那里会工作。

                        它出现在不同的地方。在 IE9beta 可以在 Print->Page 中找到 纸张选项下的选项

                        在 FireFox 中,它位于页面设置中 -> [格式和选项]选项下的选项卡。

                        【讨论】:

                          猜你喜欢
                          • 2015-06-16
                          • 2016-01-29
                          • 2011-04-23
                          • 1970-01-01
                          • 2014-03-31
                          • 2014-03-18
                          • 2010-10-24
                          相关资源
                          最近更新 更多