0

テーブル行のすべての奇数インスタンスを表示しようとしていますが、間に別のテーブルがあります。

（簡略化された）構造は次のとおりです。

<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>

この質問では、1 つの table.trendgraph テーブルと 1 つの table.datatable のセットを「テーブル セット」と呼んでいます。

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

これらのセットのうち 2 つが 1 ページに収まります。セクション全体は、それを囲む <div> と 1 ～ 6 セットのみで構成されます。

出力は実際にはページ化されたメディア (PrinceXML 経由の pdf) であるため、ブラウザー間の互換性は必要ありません。

課題は次のとおりです: table.trendgraph テーブルに tr.q3_pageheader を表示したいのは、最初に表示されたときにページごとに 1 回だけです。この行は、1 ページに 2 回発生します。

私のcssは最初にこれらの行をオフにします:

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

次に、目的の行を元に戻すためにさまざまなことを試みています。

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

nth-child(1) を設定することで、表示する最初の tr.q3_pageheader (のみ) を取得できます。不思議なことに、tr.q3_pageheader 行はどれも nth-child(2) または nth-child(even) で表示されません。すべての tr.q3_pageheader 行が nth-child(odd) で表示されます。

html から table.datatable を削除すると、すべての nth-child 設定が期待どおりに機能することに注意してください。

「ページ」の周囲に div を設定したり、tr.q3_pageheader の最初のインスタンスのクラスを設定したりするなど、ここで回避策を実行できることは明らかです。これは、さまざまな数の「テーブル セット」を出力するシステムの一部になります。可能であれば、バックエンドで追加の意思決定を必要とせずに、html または css のみで問題を解決したいと考えています。

ヘルプやポインタをいただければ幸いです。ありがとう！

4

1 に答える 1

0

これで私自身の質問に答えます：

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

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

これが PrinceXML と Webkit の両方で機能することを確認しました。ページごとに設定された数のテーブルがある場合は、同様のことが機能します。

于 2010-07-02T19:06:19.463 に答える