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

Question

Целью является печать таблицы с цветными тд-с.Мне нужен правильный путь для всех типов браузеров.

Есть ли способ?

Answer 1

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

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

Answer 2

Цитата отсюда: Проблемы с печатью CSS @media с background-color;

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

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

Оно находится в разных местах.В IE9beta он находится в «Печать» -> «Параметры страницы» в разделе «Параметры бумаги»

В FireFox - в «Параметры страницы» -> вкладка «Формат и параметры» в разделе «Параметры».

Answer 3

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

Answer 4

Я нашел решение @ 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;
}

Answer 5

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

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

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

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

Answer 6

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

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>

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

Answer 8

Я пытался решить эту проблему, и генерация контента 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;
}

Вам нужно будет изготовить детали вручную, чтобы соответствовать вашим потребностям.

НТН

Answer 9

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

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

Answer 10

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