Question

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

有什么办法吗？

Answer 1

对于webkit浏览器（Chrome和Safari）：

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

Answer 2

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

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

一旦设置好，就会打印出来   什么背景颜色和图像   你有工作。

它存在于不同的地方。在   IE9beta它在Print-＆gt; Page中找到   纸张选项
下的选项
在FireFox中，它位于页面设置中 - ＆gt;   [格式＆amp;选项]选项卡下的选项卡。

Answer 3

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

Answer 4

没有任何解决方案不会非常丑陋，例如在桌子下面放置图像或可笑的大边框。

这取决于你需要那些背景。如果它是装饰性的，那么最好不要强迫它。

如果要突出显示某些表格单元格，除背景外还可以使用颜色border。边框是印刷的。

如果打印背景非常重要，那么您可以为用户提供PDF打印。

Answer 5

我发现@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;
}

Answer 6

我一直在努力解决这个问题，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

Answer 7

从我对此的研究来看，你不太可能找到涵盖所有内容的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进行一些处理。希望这会有所帮助。

Answer 8

只需在CSS中使用!important即可在Chrome中打印。

Answer 9

您可以通过将内容作为提交类型的输入标记并将值设置为John Doe来对背景进行一些着色。然后使用类或样式来操纵着色。从来没有那么浏览器会将预测器更改为黑色，因此只使用浅色背景，但它可以工作（一点点）。

Answer 10

这适用于我，不会影响您的其他CSS代码：

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

Answer 11

            <td><img src="your_image" /></td>

Answer 12

这个愚蠢的解决方案适用于Firefox和Chrome（Ubuntu）。

Firefox：打开打印对话框（快捷方式： Ctrl + P ）并转到Options标签，并确保选中Print Background Colors选项。

Chrome：打开打印对话框（快捷键： Ctrl + P ）并展开More settings并勾选{{1 }}

据我测试，Background graphics不适用于Firefox，并且在Chrome中很受欢迎。但在两种浏览器中，最终的打印选项都会覆盖所有这些选项。 所以没有它就可以完全取消。

尝试使用和不使用此处描述的各种设置打印以下示例HTML页面，您将知道。

＆＃13;

-webkit-print-color-adjust:exact;

＆＃13;

Answer 13

对于Chrome，您可以使用以下方法：

from scrapy.crawler import CrawlerRunner

def _run_crawler(spider_cls, settings):
    """
    spider_cls: Scrapy Spider class
    returns: Twisted Deferred
    """
    runner = CrawlerRunner(settings)
    return runner.crawl(spider_cls)     # return Deferred


def test_scrapy_crawler():
    deferred = _run_crawler(MySpider, settings)

    @deferred.addCallback
    def _success(results):
        """
        After crawler completes, this function will execute.
        Do your assertions in this function.
        """

    @deferred.addErrback
    def _error(failure):
        raise failure.value

    return deferred

或在打印预览中，勾选更多设置->背景图形

对于Firefox，您无法使用任何CSS启用它。您可以按以下步骤启用它（如果看不到文件，请按Alt键一次）。 文件->页面设置，然后勾选打印背景（颜色和图像）

CSS如何打印具有背景颜色的表（不更改打印设置）

13 个答案: