Печать CSS: пустое пространство сверху

Question

Борьба с тем, что кажется общей проблемой, но ни одно из предложений, которые я нашел до сих пор, не работает.Я работаю над таблицей стилей для печати, страница не содержит ничего, кроме таблицы и одного тега h1.

Проблема в том, что я получаю пустой пробел в верхней части страницы, около 1/4 страницы в портретной ориентации и половину страницы в альбомной ориентации - ни одна из них явно не приемлема для моих пользователей.

Я пытался обнулить поля для всех возможных элементов, которые я могу придумать, включая body, html, table, tr и tr. Вставка HTML и CSS ниже (некоторые теги предназначены для другого HTMLниже не указано, это для других страниц, также использующих тот же CSS для печати), надеюсь, это простое исправление или отсутствует поле:)

/*Print CSS template */
body, #content, #container {
   width: 100%;
   margin: 0;
   float: none;
   background: #fff url(none);
}

#topnav, #navbar, #nav, #sidebar, .ad, .noprint {
   display: none; 
}
body {
   font: 1em Georgia, "Times New Roman", Times, serif;
   color: #000; 
}

h1,h2,h3,h4,h5,h6 {
   font-family: Helvetica, Arial, sans-serif;
   color: #000;
}
h1 { font-size: 250%; }
h2 { font-size: 175%; }

a:link, a:visited {
   color: #00c;
   font-weight: bold;
   text-decoration: underline; }
#content a:link:after, #content a:visited:after {
   content: " (" attr(href) ") ";
}

/*Print CSS template END */

.r_main
{
    width: auto;
    padding: 0;
    margin: 0;

}

table{
   margin: 0;
   padding: 0;
}

.r_wrap
{
    margin: 0;
    width: 100%;
    display: block;
    min-height: 30px;
    float: left;
    display: block;
    border-bottom: 1px solid #000;
}

.r_left 
{
    margin: 0;
    width: 300px;
    color: #000;
    display: block;
    float: left;
    font: 13px Arial, Helvetica,"Lucida Grande", serif; color: #000;
}

.r_right
{
    margin: 0;
    display: block;
    float: left;
    color: #000;
    font: 13px Arial, Helvetica,"Lucida Grande", serif; color: #000;
}

.r_right p
{
    padding: 0;
    margin: 7px 0 3px 0;
    font: 13px Arial, Helvetica,"Lucida Grande", serif; color: #000;
}

.r_left span, .r_right span
{
    display: block;

    margin: 0;
    padding: 5px 0 0 0;
}

.r_right ul 
{

    margin: 3px 0 0 15px;
    padding: 0;
}

.r_right ul li
{
    margin: 0;
    padding: 3px 0 0 0;
}

.r_zeb1
{
    background-color: #f9f9f9;
}

.r_zeb2
{
    background-color: #e9e9e9;    
}   

HTML

<table>
<tr class="r_wrap r_zeb2">                               
<td class="r_left"><span>Location</span></td>
<td class="r_right"><span>'.$frm->get_location($selectedE['e_location']).'</span></td>
</tr>
</table>

Answer 1

Согласен с user401183, я думаю, что его размер шрифта

h1 { font-size: 250%; }
h2 { font-size: 175%; }

Answer 2

Предполагая, что h1 находится перед таблицей, это может быть проблемой. Возможно, вы захотите обнулить поля и отступы на нем. Это также может помочь переключиться на 'pt' для размера шрифта вместо использования%.

h1{
   margin:0;
   padding:0;
   font-size: 36pt;
   }