Question

我正在打印一个带有位置的表格：固定页眉，一个大小一致的数据部分，一个很小但动态大小的数据部分，然后是两个列表。列表在页面上正确地重复了它们的标题行，但是我使用padding-top解决了固定的标题。但是，这也将应用于第一页开头的标题行，从而产生很大的空白区域。

第二个列表上的问题通过使用分页后显示来缓解：始终调整标题以适合正确的位置。

目标平台是IE11，它试图避免使用JQuery代替JavaScript本身，但对可行的解决方案开放。

我已经尝试过使用伪元素和伪选择器来尝试仅影响第一个实例，但没有显示任何效果。

<div id="PrintDiv">
    <div id="PrintHeader">
        <asp:Label ID="lblPrintTitle" runat="server" Text="Report" CssClass="lblTitle" /><br /><br />
        <asp:Label ID="lblPrintSource" runat="server" Text="Location" />
        <div>
            <asp:Label runat="server" Text="Where" CssClass="lblBold" /><br />
            <asp:Label runat="server" Text="Owner" /><br />
            <asp:Label runat="server" Text="Who" /><br />
            <asp:Label runat="server" Text="Address" /><br />
        </div>
    </div>
    <div id="PrintInfo">
        <asp:Label ID="lblPrintInfo" runat="server" Text="Information" />
        <table>
            <tr><td>Product:</td><td class="lblData" colspan="3"></td></tr>
            <tr><td>Data 1:</td><td class="lblData"></td><td>Data 2:</td><td class="lblData"></td></tr>
            <tr><td>Data 3:</td><td class="lblData"></td><td>Data 4:</td><td class="lblData"></td></tr>
            <tr><td>Data 5:</td><td class="lblData"></td><td>Data 6:</td><td class="lblData"></td></tr>
        </table>
    </div>
    <div id="PrintPeople">
        <asp:Label ID="lblPrintPeople" runat="server" Text="Assigned Personnel" />
        <table></table>
    </div>
    <div id="PrintList1">
        <asp:Label ID="lblPrintList1" runat="server" Text="Some Title" />
        <asp:GridView ID="List1" runat="server" HeaderStyle-CssClass="_tblHeaders" RowStyle-CssClass="lblData" ShowHeader="true" />
    </div>
    <br style="height: 20px;" />
    <div id="PrintList2">
        <div style="position: relative;">
            <asp:Label ID="lblPrintList2" runat="server" Text="Some Title" CssClass="_Title" />
        </div>
        <asp:GridView ID="List2" runat="server" HeaderStyle-CssClass="_tblHeaders" RowStyle-CssClass="lblData" ShowHeader="true" />
    </div>
    <div id="PrintFooter" class="pFooter">
        <asp:Label ID="lblDate" runat="server" />
    </div>
</div>

#PrintList1 th, #PrintList2 th{
    border: none;
    border-bottom: 1px solid black;
    text-align: left;
    padding-top: 63px;
}

希望通过css填充来查看所有页面元素是否排列成相对位置。

有没有一种方法可以将样式仅应用于多页表的第一个显示的标题行？

0 个答案: