Как отображать строку таблицы только один раз на страницу? - PullRequest
Новая
       41

Как отображать строку таблицы только один раз на страницу?

0 голосов
/ 29 июня 2010

Я пытаюсь отобразить каждый нечетный экземпляр строки таблицы, однако есть еще одна таблица.

(упрощенная) структура: 

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

Для этого вопроса я называю «набор таблиц» набором из одной таблицы table.trendgraph и одного table.datatable: 

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

Два из этих наборов поместятся на одной странице. Весь раздел состоит только из прилагаемых

плюс от 1 до 6 комплектов.

Выходные данные на самом деле являются постраничным носителем: pdf через PrinceXML, поэтому кросс-браузерная совместимость не требуется.

Задача: я хочу, чтобы tr.q3_pageheader отображался в таблице table.trendgraph только один раз на страницу, при первом появлении. Эта строка встречается дважды на странице.

Мой 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;
}

Я могу получить первый tr.q3_pageheader (только) для отображения, установив nth-child (1). Любопытно, что ни одна из строк tr.q3_pageheader не отображается с nth-child (2) или nth-child (even). Все строки tr.q3_pageheader отображаются с nth-child (нечетным).

Обратите внимание, что когда я удаляю table.datatable из html, все настройки nth-child работают как положено.

Я мог бы, конечно, обойти это, например, установить div для «страницы» или установить класс для первого экземпляра tr.q3_pageheader. Это будет частью системы, которая будет выводить различное количество «наборов таблиц». Если возможно, я бы хотел решить эту проблему только в формате html или css, не требуя дополнительных решений в бэкэнде.

Любая помощь или указатели будут оценены. Спасибо!

1 Ответ

0 голосов
/ 02 июля 2010

Отвечая на мой вопрос следующим образом: 

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

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

Я подтвердил, что это работает как в PrinceXML, так и в webkit.Нечто подобное будет работать в любом случае, когда у вас есть определенное количество таблиц на страницу.

...