Frage

Ich versuche, jede ungerade Instanz einer Tabellenzeile angezeigt werden, jedoch gibt es eine andere Tabelle dazwischen.

Die (vereinfacht) Struktur ist:

<div class="question03">
    <table class="trendgraph">
        <thead>
            <tr class="q3_pageheader">....</tr>
            <tr>...</tr>
        </thead>
        <tbody>...</tbody>
    </table>
    <table class="datatable">
        <thead>...</thead>
        <tbody>...</tbody>
    </table>
    <table class="trendgraph">...</table>
    <table class="datatable">...</table>
</div>

Bei dieser Frage ich rufe ein ‚Tisch-Set‘ den Satz von einem table.trendgraph Tisch und ein table.datatable:

<!-- this is a set -->
<table class="trendgraph">...</table>
<table class="datatable">...</table>

Zwei dieser Sätze auf einer einzigen Seite passen. Der gesamte Abschnitt besteht nur aus dem umschließenden

und 1 bis 6-Sets.

Der Ausgang ist tatsächlich ausgelagerten Medien:. Pdf über PrinceXML somit Cross-Browser-Kompatibilität ist nicht erforderlich

Die Herausforderung ist: Ich tr.q3_pageheader in der table.trendgraph Tabelle pro Seite nur einmal zeigen will, das erste Mal, es erscheint. Diese Zeile wird zweimal pro Seite auftreten.

Meine CSS ersten Schwünge diese Zeilen aus:

div.question03 > table.trendgraph > thead > tr.q3_pageheader {
    display: none;
}

Dann habe ich verschiedene Dinge versucht, die gewünschte Zeile wieder einzuschalten:

div.question03 > table.trendgraph:nth-child(odd) > thead > tr.q3_pageheader {
    display: table-row;
}

Ich kann die ersten tr.q3_pageheader (nur) zu Anzeige erhalten, indem n-Kind-Einstellung (1). Seltsamerweise, keine der tr.q3_pageheader Zeilen angezeigt werden mit n-Kind (2) oder n-te-Kind (gerade). Alle der tr.q3_pageheader Zeilen angezeigt werden mit n-Kind (ungerade).

Beachten Sie, dass, wenn ich table.datatable aus dem html entfernen, dann alle der n-te-Kind-Einstellungen wie erwartet.

Ich kann natürlich Arbeit arounds tut hier, wie ein div um eine ‚Seite‘ Einstellung oder eine Klasse für die erste Instanz von tr.q3_pageheader Einstellung. Dadurch wird ein Teil eines Systems, das ausgeben wird eine unterschiedliche Anzahl von ‚Tischsets‘ sein. Wenn möglich, möchte ich die Ausgabe in HTML oder CSS lösen nur, ohne dass zusätzliche Entscheidungsfindung im Backend.

Jede Hilfe oder Zeiger würde geschätzt. Dank!

War es hilfreich?

Lösung

Answering my own question with this:

div.question03 tr.q3_pageheader {
    display: none;
}

div.question03 table:nth-child(4n+1) tr.q3_pageheader {
    display: table-row;
}

I've confirmed this works both in PrinceXML and webkit. Something similar would work in any case where you had a set number of tables per page.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top