Как сохранить стойкость счетчика CSS в разных таблицах?
Мой HTML-документ отформатирован так, чтобы его содержимое печаталось. Каждая печатная страница оформлена в виде таблицы.
Документ также имеет заголовки на страницах (h1...h5).
Проблема в том, что подзаголовок (на уровне h2..h5) продолжается на следующей печатной странице (то есть: таблица).
Вот что я получаю:
1. (1.)
1.1. (1.1.)
1.2. (1.2.)
1.2.1. (1.2.1.)
1.3. (1.3.)
---------------- page break (i.e.: new table)
1.1. (1.4.)
2. (2.)
2.1. (2.1.)
2.1.1. (2.1.1)
2.1.2. (2.1.2)
Как видите, элемент H2 отсутствует в сорняках, если на него ссылаются в следующей таблице. В частности, это "1.1", когда я хочу, чтобы это было "1.4".
Вот мой HTML / CSS:
<HTML>
<HEAD>
<STYLE>
.initHeadingCounters
{
counter-reset: headingCounter1 headingCounter2 headingCounter3 headingCounter4 headingCounter5;
}
.counter_h1
{
counter-reset: headingCounter2 headingCounter3 headingCounter4 headingCounter5;
}
.counter_h1:before
{
counter-increment: headingCounter1;
content: counter(headingCounter1) ". ";
}
.counter_h2
{
counter-reset: headingCounter3 headingCounter4 headingCounter5;
}
.counter_h2:before
{
counter-increment: headingCounter2;
content: counter(headingCounter1) "." counter(headingCounter2) ". ";
}
.counter_h3
{
counter-reset: headingCounter4 headingCounter5;
}
.counter_h3:before
{
counter-increment: headingCounter3;
content: counter(headingCounter1) "." counter(headingCounter2) "." counter(headingCounter3) ". ";
}
.counter_h4
{
counter-reset: headingCounter5;
}
.counter_h4:before
{
counter-increment: headingCounter4;
content: counter(headingCounter1) "." counter(headingCounter2) "." counter(headingCounter3) "." counter(headingCounter4) ". ";
}
</STYLE>
</HEAD>
<BODY>
<DIV Class="initHeadingCounters">
<TABLE>
<TR>
<TD>
<H1 Class="counter_h1">(1)</H1>
<H2 Class="counter_h2">(1.1)</H2>
<H2 Class="counter_h2">(1.2)</H2>
<H3 Class="counter_h3">(1.2.1)</H3>
<H2 Class="counter_h2">(1.3)</H2>
</TD>
</TR>
</TABLE>
<TABLE>
<TR>
<TD>
<H2 Class="counter_h2">(1.4)</H2>
<H1 Class="counter_h1">(2)</H1>
<H2 Class="counter_h2">(2.1)</H2>
<H3 Class="counter_h3">(2.1.1)</H3>
<H3 Class="counter_h3">(2.1.2)</H3>
</TD>
</TR>
</TABLE>
</DIV>
</BODY>
</HTML>