CODEWITHSUNDEEP
htmlcss
Rominitch
Rominitch

Reputation: 304

HTML - How to print page number with thead/tfoot

I try to use counter(page) inside my HTML report but without success. I read many StackOverflow pages about this topics but I never found working solution !

Environment

Workflow

Questions ?

Thanks !

PS: Please publish entire solution (not a partial HTML/CSS code) !

My HTML demo

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <title>HTML CSS Page counter</title>
    <style>
    table.report-container {
        page-break-after:always;
    }
    thead.report-header {
        display:table-header-group;
    }
    tfoot.report-footer {
        display:table-footer-group;
    }
    @media print{
        @page {
          size: A4 portrait;
        }
        .pageBreak {
            page-break-before: always;
        }
        span.page-number:after {
            content: "Page " counter(page);
        }
    }
    @media screen{
        span.page-number:after {
            content: "All pages";
        }
    }
    </style>
</head>
<body>
<table class="report-container">
   <thead class="report-header">
     <tr>
        <th class="report-header-cell">
           <div class="header-info">
                <table border="1" width="100%">
                    <tr height="100px">
                        <td align="center" valign="middle">Header title</td>
                        <td><span class="page-number"></td>
                    </tr>
                </table>
           </div>
         </th>
      </tr>
    </thead>
    <tfoot class="report-footer">
      <tr>
         <td class="report-footer-cell">
           <div class="footer-info">
           <table border="1" width="100%">
                <tr height="50px">
                    <td><p>Other info</p></td>
                </tr>
            </table>
           </div>
          </td>
      </tr>
    </tfoot>
    <tbody class="report-content">
      <tr>
         <td class="report-content-cell">
            <div class="main">
            First page with some data.
            <div class="pageBreak"></div>
            Second page with some data.
            <div class="pageBreak"></div>
            Third page with some data.
            <div class="pageBreak"></div>
            Fourth page with some data.
            <div class="pageBreak"></div>
            </div>
          </td>
       </tr>
     </tbody>
</table>
</body>
</html>

Upvotes: 5

Views: 20793

Answers (1)

Richard Parnaby-King
Richard Parnaby-King

Reputation: 14891

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 tables. 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;
  }
}
<div id="header">
  <div id="header-title">
    <p>Header title</p>
  </div>
  <div id="page-number"></div>
</div>
<div id="content">
  First page with some data.
  <div class="pageBreak"></div>
  Second page with some data.
  <div class="pageBreak"></div>
  Third page with some data.
  <div class="pageBreak"></div>
  Fourth page with some data.
  <div class="pageBreak"></div>
</div>
<div id="foot">
  Other info.
</div>

Upvotes: 6

Related Questions