CSS如何使用背景颜色打印表格（无需更改打印设置）
目的是用彩色的td-s打印表格。 我需要一种适用于所有types浏览器的方法。
有什么办法吗？
从这里引用： CSS @media打印问题与背景颜色;
如果用户在打印设置中closures了“打印背景颜色和图像”，则没有CSS会覆盖该内容，因此请始终考虑此问题。 这是一个默认设置。
一旦这样设置，它将打印背景颜色和图像，你在那里会有效果。
它在不同的地方被发现。 在IE9beta中，可以在“纸张选项”下的“打印”>“页面选项”中find它
在FireFox中，它位于选项下的页面设置 – > [格式和选项]选项卡中。
对于webkit浏览器（Chrome和Safari）：
body{ -webkit-print-color-adjust:exact; }
一个特别难看的解决scheme是在表格单元格中放置一个.gif（或任何forms的vectorgraphics，以便大小可以改变）图像，其高度和宽度都是100％，然后是一个负的z-index属性。
我发现@ willert的解决scheme有点一致和简单。 我进一步发展，希望它可以帮助你们…
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; }
没有可怕的解决scheme，就像定位图像或在桌子底下的可笑的大边框。
这取决于你需要那些背景。 如果是装饰的话，最好不要强迫它。
如果要突出显示某些表格单元格，则除了背景之外，还可以使用颜色border 。 边界被打印。
如果打印背景非常重要，那么您可以给用户打印PDF。
在你的CSS中使用!important ，它将在Chrome中打印。
我一直在玩弄解决这个问题，CSS内容生成和现代浏览器似乎提供了一个很好的解决这个问题。 没有广泛的testing，反馈欢迎！
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
从我对此的研究来看，你不太可能find涵盖一切的CSS解决scheme。 你可能能够应用一个jQuery解决scheme。
<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的工作。 希望这可以帮助。
您可以通过将内容作为提交types的input标签并将值设置为John Doe来为背景添加一点色彩。 然后使用类或样式来操纵着色。 从来没有更less的浏览器将forecoler更改为黑色，所以只使用浅色背景，但它的作品（一点点）。
<td><img src="your_image" /></td>
这适用于我，并不会影响您的其他CSS代码：
@media print { div { background: #333333 !important; } }
