1

次のようなhtmlテーブルがあります。

<div class="report">
    <table>
        <thead>...</thead>
        <tfoot>...</tfoot>
        <tbody>
            <tr class="row-to-style">...</tr>
        </tbody>
        <tbody>...</tbody>
    </table>
</div>

上記の tbody はすべて同じ構造であることに注意してください。最初の tr.row-to-style 行を他の行とは異なるスタイルにしたいと考えています。各 tbody には tr.row-to-style がありますが、ページの最初の行にのみ影響を与えたいと思います。出力はページ化されたメディア、具体的には xhtml ソース ファイルから PrinceXML で生成された pdf ファイルです。これは、高度な css セレクターを使用できること、クロスブラウザー互換性が不要であること、および JavaScript を使用できないことを意味します。

出力の最初のページでターゲット行のスタイルを設定するのは簡単です。使うことができます：

table tfoot + tbody tr.row-to-style {...}

また、ページに収まる tbody の数がわかっている場合は、次のようなことができます。

table tbody:nth-of-type(4n+1) tr.row-to-style {...}

しかし、ページに収まる tbody の数がわからない場合、どうすれば最初の tbody をターゲットにできますか?

出力では、実質的に、ページごとに thead セクションと tfoot セクションが繰り返されます。テーブルは、これを利用するために特別にこのように設計されました。tbody の後に改ページを許可します。出力には複数のページが含まれる場合があります。

したがって、出力には、各ページに一種の疑似スレッドと疑似フットがあります。しかし、ページの最初の tbody をマークするためにそのようなものを使用する方法がわかりません。何か案は？ありがとう...

4

1 に答える 1

0

が作成する「ページボックス」に基づいてcssをターゲットにする可能性について説明しているドキュメントはないようです@page。「ページボックス」を作成する方法についてはすべて説明@pageしていますが、ページ上の子要素のスタイルを設定するためにそのページボックスにアクセスまたはポイントする方法については何も説明していません。これらはすべて暗闇の中でのショットであり、テストされておらず、おそらく有効ではありませんが、おそらく...

@page tbody:first-child tr.row-to-style { styles go here }

それとも、名前付きページの使用でしょうか? お気に入り：

@page nameOfPage {}
tbody:first-child tr.row-to-style {page: nameOfPage; other styles go here}

または、次のように@media定義するようなもの:

@page {
    tbody:first-child tr.row-to-style { styles go here}
}

または多分（コンテンツは と の各ページで生成されると仮定しているためthead、tfoot理論的には各ページtheadの最初tbodyの前に配置する必要があります）：

thead + tbody tr.row-to-style { styles go here }

正直なところ、これらのどれもうまくいくとは思いませんが、試してみることはできます。問題は、実数がソースtfootの上部で一度だけ定義されているため、css セレクターが、生成されたページをスタイリング目的で存在するものとして認識しないことです。

于 2010-07-19T21:19:36.473 に答える