Я распечатываю форму с позицией: фиксированный заголовок страницы, секцию данных одинакового размера, небольшую, но динамически изменяемую секцию данных, затем два списка. Списки правильно повторяют строки заголовков на разных страницах, но я учитываю фиксированный заголовок, используя 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.