CSS Как распечатать таблицу с цветом фона (без изменений настроек печати)

Ответ 1

Для веб-браузеров (Chrome и Safari):

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

Ответ 2

Цитата отсюда: Проблемы с печатью CSS @media с фоновым цветом,

Если пользователь имеет "Печать фона" цвета и изображения "отключены в их настройки печати, ни один CSS не будет переопределите это, поэтому всегда учитывайте что. Это значение по умолчанию.

Как только это будет установлено, оно будет распечатываться цвета фона и изображения, что вы будете там работать.

Он встречается в разных местах. В IE9beta найден в Print- > Page Параметры в разделе Параметры бумаги

В FireFox это в настройке страницы → [Формат и параметры] в разделе" Параметры".

Ответ 3

особенно уродливым решением является размещение позиции .gif(или любой формы векторной графики, поэтому размер может быть изменен) изображение в ячейке таблицы с высотой и шириной 100%, а затем отрицательное свойство z-index.

Ответ 4

Нет решения, которое не ужасно уродливо, как позиционирование изображения или смехотворно большая граница под таблицей.

Это зависит от того, для чего вам нужны эти фоны. Если это декоративно, то лучше не форсировать его.

Если выделить некоторые ячейки таблицы, вы можете использовать цвет border в дополнение к фону. Границы печатаются.

Если очень важно, чтобы фон был напечатан, вы можете предоставить пользователям PDF для печати. ​​

Ответ 5

Я нашел решение @willert несколько последовательным и легким. Я разработал его дальше, надеюсь, он поможет вам, ребята...

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

Ответ 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;
}

Вам нужно будет обработать детали в соответствии с вашими потребностями.

НТН

Ответ 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>

Вопрос был немного расплывчатым, поэтому вам, вероятно, понадобилась бы некоторая работа с css с overflow и установка ширины ячейки/столбца. Надеюсь, это поможет.

Ответ 8

Просто используйте !important в своем CSS, и он будет печатать в Chrome.

Ответ 9

Вы можете немного раскрасить фон, поместив содержимое в качестве входного тега типа submit и задайте значение John Doe. затем используйте класс или стиль для управления раскраской. Тем не менее, браузер изменит forecoler на черный, поэтому используйте только светлые фоны, но он работает (немного).

Ответ 10

Это работает для меня и не влияет на ваш другой код CSS:

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

Ответ 11

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

Ответ 12

Это глупое решение работало для меня в 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>