打印CSS:顶部空白空间

时间:2011-09-05 16:03:57

标签: css printing html-table

挣扎于看似常见的问题,但到目前为止我找到的建议都没有奏效。我正在开发一个用于打印的样式表,该页面只包含一个表和一个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>

2 个答案:

答案 0 :(得分:1)

假设h1在表之前,可能是问题。您可能希望将边距和零点归零。填充它。它也可以帮助您切换到字体大小的'pt',而不是使用%。

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

答案 1 :(得分:1)

同意user401183,我认为它的字体大小

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