CODEWITHSUNDEEP
htmlcssprinting
Karthy
Karthy

Reputation: 11

How to show Page # in HTML footer of table

I am trying to display page numbers in footer of table in Chrome. But when i implement the CSS code of Counter example shown below. I do not get page numbers displayed. It gives me the same number repeated on all pages.

I tried the following code

<table>
<thead>
    some header here...
</thead>
<tbody>
    some rows here....
<tbody>
<tfoot>
    <div id="#pageFooter"></div>
</tfoot>

with CSS

table{
 counter-reset: page;
}
tfoot{
 display: table-footer-group;
}
#pageFooter:after{
 counter-increment: page;
 content: "Page " counter(page);
}

I also tried this approach

@page {
@bottom-left {
 content: counter(page)
 }
}

Please help me in figuring out the solution

Upvotes: 0

Views: 1232

Answers (1)

NcXNaV
NcXNaV

Reputation: 1761

Move counter-reset: page; from <table> to your <body> tag.

body{
    counter-reset: page;
}

Upvotes: 0

Related Questions