Html table page number

CSS Print page numbers for table of contents using CSS in Chrome

The following tutorial shows you how to use CSS to do «CSS Print page numbers for table of contents using CSS in Chrome».

CSS Style

The CSS style to do «CSS Print page numbers for table of contents using CSS in Chrome» is

ol !-- w w w. d e mo 2 s . c o m --> padding:0; list-style:none; font-size:1.25em; font-family:sans-serif; width:60%; margin-left:20%; padding:1em; border:1px dotted #bbb; counter-reset:list-counter; > li < display:table; > li span, li:after < display:table-cell; vertical-align:bottom; padding:0 1em; > li span.line < width:100%; border-bottom:1px dotted #000; > li:after < counter-increment:list-counter; content:counter(list-counter); float:right; >

HTML Body

body> ol> li>span>Test span >"line">   li>span>Test2 span >"line">   li>span>Test3 span >"line">     

The following iframe shows the result. You can view the full source code and open it in another tab.

html> head> meta name="viewport" content="width=device-width, initial-scale=1"> style id="compiled-css" type="text/css"> ol !-- w w w . d e mo 2 s .c o m --> padding: 0; list-style: none; font-size: 1.25em; font-family: sans-serif; width: 60%; margin-left: 20%; padding: 1em; border: 1px dotted #bbb; counter-reset: list-counter; > li < display: table; > li span, li:after < display: table-cell; vertical-align: bottom; padding: 0 1em; > li span.line < width: 100%; border-bottom: 1px dotted #000; > li:after < counter-increment: list-counter; content: counter(list-counter); float: right; >  body> ol> li>span>Test span >"line">   li>span>Test2 span >"line">   li>span>Test3 span >"line">      

Related

• CSS Prevent deletion of all
• tags in a content editable
• CSS Prevent table from expanding beyond parent
• CSS Prevent tables from relocating
• CSS Print page numbers for table of contents using CSS in Chrome
• CSS Print PHP array into table views with foreach
• CSS Printing huge table with window.print() only prints one page
• CSS Printing huge table with window.print() only prints one page (Demo 2)

demo2s.com | Email: | Demo Source and Support. All rights reserved.

Источник

Print Page Numbers on Pages When Printing HTML

As @page with pagenumbers don’t work in browsers for now I was looking for alternatives.

I’ve found an answer posted by Oliver Kohll.

I’ll repost it here so everyone could find it more easily:

For this answer we are not using @page, which is a pure CSS answer, but work in FireFox 20+ versions. Here is the link of an example.

#content display: table;
>

#pageFooter display: table-footer-group;
>

#pageFooter:after counter-increment: page; 
content: counter(page);
>

 
Page
 
multi-page content here.

This way you can customize your page number by editing parametrs to #pageFooter. My example:

#pageFooter:after counter-increment: page; 
content:"Page " counter(page); 
left: 0; 
top: 100%; 
white-space: nowrap; 
z-index: 20; 
-moz-border-radius: 5px; 
-moz-box-shadow: 0px 0px 4px #222; 
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); 
>

This trick worked for me fine. Hope it will help you.

HTML — How to print page number with thead/tfoot

Not all browsers support content:counter(page); So far the only one I’ve found that does is Firefox. But it doesn’t work with your code example because you’re using table s. Specifically, page-break-before does not (is not supposed to) work within a table . Chrome lets you, but Firefox doesn’t.

For demonstration purposes I’ve tried to recreate your table in css and paginate the results.

You’ll need to copy the results into a new .html file to test.

body < width: 300px;>
#header < border: 1px solid; overflow: hidden;>
#header>div < float: left; width: 50%; line-height: 100px; text-align: center;>
#foot < border: 1px solid;>
#header p < margin: 0;>
#header #page-number < border-left: 1px solid; width: calc(50% - 1px);>
#page-number:after < content: "All pages";>
@media print < .pageBreak < page-break-before: always; padding-bottom: 120px; >#content < padding-top: 120px; >#header < display: block; position: fixed; top: 0pt; left: 0pt; right: 0pt; >#page-number:after < content: "Page " counter(page); counter-increment: page; >#foot < display: block; position: fixed; bottom: 0pt; >>

 
 
Header title
 
 
 
First page with some data. Second page with some data. Third page with some data. Fourth page with some data.
 
Other info.

Page numbers with CSS/HTML

Depending on your required browser support.

@page @bottom-right content: counter(page) " of " counter(pages); 
>
>

• http://www.w3.org/TR/css3-page/
• http://www.intelligrape.com/blog/2010/08/20/add-page-number-using-page-property-of-css/
• http://www.princexml.com/doc/6.0/page-numbers/

Источник