html / css: границы таблицы появляются на экране, но не выводятся на печать? - PullRequest
1 голос
/ 12 августа 2010

Ниже приведен тестовый HTML-файл.Он хорошо отображается на экране, но когда я «печатаю» или «печатаю предварительный просмотр» в Firefox 3.6.8 или IE 7.0, границы таблицы не отображаются.Чего мне не хватает?

<html>
<head>
    <style type="text/css">
        body {
          background: black;
          font-family: arial, sans-serif;
          color: white;
        }
        table.param, table.param td, table.param th {border: 1px solid white; border-collapse: collapse; }
        table.param td { text-align: left; vertical-align: bottom; color: white; font-size: 90%; }
        h2,h3 { margin: 0; }
        a:link { color: #00FF00; } 
        a:visited { color: #8080FF; }
        a:hover { color: #FFFFFF; }
        a:active { color: #FFFF00; }
    </style>
</head>
<body><h2>Software Parameters</h2>
    <table class="param"><tbody>
        <tr><th>head1</th><th colspan="3">blah blah blah</th></tr>
        <tr><td>param1</td><td>foo</td><td>2000</td><td>param1 description</td></tr>
        <tr><td>param2</td><td>bar</td><td>4000</td><td>param2 description</td></tr>
        <tr><td>param3</td><td>baz</td><td>3000</td><td>param3 description</td></tr>
    </tbody></table>
</body>
</html>

обновление: Ага, похоже, тег <style> имеет атрибут media .Я адаптировал ответ Дерека, и теперь заставляю его работать в IE 7.0, но не в Firefox 3.6.8: (это известная ошибка в Firefox?)

<html>
<head>
    <style type="text/css" media="print">
        body {
          background: white;
          color: black;
        }
    </style>
    <style type="text/css" media="screen">
        body {
          background: black;
          color: white;
        }
    </style>
    <style type="text/css">
        body {
          font-family: arial, sans-serif;
        }
        table.param, table.param td, table.param th {border: 1px solid; border-collapse: collapse; }
        table.param td { text-align: left; vertical-align: bottom; font-size: 90%; }
        h2,h3 { margin: 0; }
        a:link { color: #00FF00; } 
        a:visited { color: #8080FF; }
        a:hover { color: #FFFFFF; }
        a:active { color: #FFFF00; }
    </style>
</head>
<body><h2>Software Parameters</h2>
    <table class="param"><tbody>
        <tr><th>head1</th><th colspan="3">blah blah blah</th></tr>
        <tr><td>param1</td><td>foo</td><td>2000</td><td>param1 description</td></tr>
        <tr><td>param2</td><td>bar</td><td>4000</td><td>param2 description</td></tr>
        <tr><td>param3</td><td>baz</td><td>3000</td><td>param3 description</td></tr>
    </tbody></table>
</body>
</html>

1 Ответ

1 голос
/ 12 августа 2010

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

Возможно, вы захотите настроить таблицу стилей печати, которая переворачивает эту цветовую схему (черный на белом вместо белого на черном) для правильной печати. ​​

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...