Есть ли способ применить стиль только к первой отображаемой строке заголовка многостраничной таблицы? - PullRequest
1 голос
/ 03 июля 2019

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...