Question

我正在尝试在我的网站上打印一张表格（http://skagitkids.net/calendar.html）。我能够创建一个print.css文件并将命令放在我的页面代码中。好处是，当单击打印按钮时，它会打印表格。糟糕的是它在它之前放置了大量的空白区域，因此桌子最终是2页。实际上3页因为它也打印出一个空白的第3页。我把代码放在错误的地方吗？

感谢您的帮助!!

以下是我将命令放入的代码部分：

<div id="layer4" style="position: absolute; left: 221px; top: 1265px; width: 884px; height: 1504px; z-index: 4">
<table class="print" border="0" cellpadding="0" cellspacing="0" style="border-collapse:
collapse;width:652pt" width="867" x:str="">
    <colgroup>
        <col style="mso-width-source:userset;mso-width-alt:1609;width:33pt" width="44" />
        <col style="mso-width-source:userset;mso-width-alt:2925;width:60pt" width="80" />
        <col style="mso-width-source:userset;mso-width-alt:2523;width:52pt" width="69" />
        <col style="mso-width-source:userset;mso-width-alt:7826;width:161pt" width="214" />
        <col style="mso-width-source:userset;mso-width-alt:7680;width:158pt" width="210" />
        <col style="mso-width-source:userset;mso-width-alt:6144;width:126pt" width="168" />
        <col style="mso-width-source:userset;mso-width-alt:2998;width:62pt" width="82" />
    </colgroup>
    <tr height="27" style="height:20.25pt">
        <td class="auto-style3" colspan="4" height="27" style="height: 20.25pt; mso-ignore: colspan; width: 306pt" width="407">
        July 2011 Calendar</td>
        <td style="width:158pt" width="210"></td>
        <td style="width:126pt" width="168"></td>
        <td style="width:62pt" width="82"></td>
    </tr>
    <tr height="17" style="height:12.75pt">
        <td class="auto-style4" height="17" style="height: 12.75pt">Date</td>
        <td class="auto-style4">Week Day</td>
        <td class="auto-style4">Time</td>
        <td class="auto-style4">Activity</td>
        <td class="auto-style4">Location</td>
        <td class="auto-style4">Cost</td>
        <td class="auto-style4">Age Range</td>
    </tr>
    <tr height="17" style="height:12.75pt">
        <td align="right" class="auto-style5" height="17" style="height: 12.75pt;" x:num="">
        15</td>
        <td class="auto-style6">Friday</td>
        <td class="auto-style7">10:30am</td>
        <td class="auto-style5">
        <a href="http://www.lclib.lib.wa.us/programs.htm">
        <span style="color:windowtext;

等等，等等！

Answer 1

您要做的是为您的打印渲染创建一个单独的样式表，如下所示：

<link type="text/css" media="screen" rel="stylesheet" href="main.css" />
<link type="text/css" media="print" rel="stylesheet" href="print.css" />

然后它可以在屏幕上显示一种方式，另一种方式在纸上。这是删除多余边距，填充，分散颜色，更改字体系列等的理想选择。

Answer 2

这是因为您的layer4 div具有将其向下和向左定位的内联样式。要在print.css中覆盖此内容，您可以添加：

#layer4 {
    position: relative !important; 
    left: 10px !important; 
    top: 10px !important; 
    height: auto !important;
}

如果您将内联样式（style="position: absolute; left: 221px; top: 1265px; width: 884px; height: 1504px; z-index: 4"）放入AlienWebGuy建议的单独css样式表中，则无需强制使用!important覆盖它们，因此您可以将该部分保留

在哪里放置class =“print”命令以打印表格？

2 个答案: