html CSS Table Scroll from the middle of the table - javascript

I have 20 Columns in my HTML Table. I will be having hundreds of records on my table. I have kept a horizontal scroll but my problem is When I am viewing the records on middle Part of the table and I want to scroll horizontally, I want to go to the bottom of the table.
I need an option to scroll from the middle of the table
<div style="width: 1100px;overflow-x: auto;">
<table >
<thead>
<td>Col-1</td>......<th>col-20</th>
</thead>
<tbody>
<?php echo "dynamic Records"; ?>
</tbody>
</table>
</div>


you need to view the table within the <div>, this <div> will be the viewport, that way you can view the table of any size, and can scroll vertically and horizontally to access complete table. try this code, it should work as you expected.
.parent {
/* width: 500px; */
height: 150px;
overflow: auto;
}
.child {
width: 1100px;
border: 1px;
}
<div class="parent">
<table class='child'>
<thead>
<td>Col-1</td>
<th>col-20</th>
</thead>
<tbody>
<tr>
<td>Col-1 Data</td>
<td>col-2 Data</td>
</tr>
<tr>
<td>Col-1 Data</td>
<td>col-2 Data</td>
</tr>
<tr>
<td>Col-1 Data</td>
<td>col-2 Data</td>
</tr>
<tr>
<td>Col-1 Data</td>
<td>col-2 Data</td>
</tr>
<tr>
<td>Col-1 Data</td>
<td>col-2 Data</td>
</tr>
<tr>
<td>Col-1 Data</td>
<td>col-2 Data</td>
</tr>
<tr>
<td>Col-1 Data</td>
<td>col-2 Data</td>
</tr>
<tr>
<td>Col-1 Data</td>
<td>col-2 Data</td>
</tr>
<tr>
<td>Col-1 Data</td>
<td>col-2 Data</td>
</tr>
<tr>
<td>Col-1 Data</td>
<td>col-2 Data</td>
</tr>
<tr>
<td>Col-1 Data</td>
<td>col-2 Data</td>
</tr>
<tr>
<td>Col-1 Data</td>
<td>col-2 Data</td>
</tr>
<tr>
<td>Col-1 Data</td>
<td>col-2 Data</td>
</tr>
<tr>
<td>Col-1 Data</td>
<td>col-2 Data</td>
</tr>
<tr>
<td>Col-1 Data</td>
<td>col-2 Data</td>
</tr>
<tr>
<td>Col-1 Data</td>
<td>col-2 Data</td>
</tr>
<tr>
<td>Col-1 Data</td>
<td>col-2 Data</td>
</tr>
<tr>
<td>Col-1 Data</td>
<td>col-2 Data</td>
</tr>
<tr>
<td>Col-1 Data</td>
<td>col-2 Data</td>
</tr>
<tr>
<td>Col-1 Data</td>
<td>col-2 Data</td>
</tr>
<tr>
<td>Col-1 Data</td>
<td>col-2 Data</td>
</tr>
<tr>
<td>Col-1 Data</td>
<td>col-2 Data</td>
</tr>
<tr>
<td>Col-1 Data</td>
<td>col-2 Data</td>
</tr>
<tr>
<td>Col-1 Data</td>
<td>col-2 Data</td>
</tr>
<?php echo "dynamic Records"; ?>
</tbody>
</table>
</div>

Related

How to get the complete position (top and left ) of a cell in a table row?

I am working on a Table in React JS.
I have this code demo - This is my Demo in CodeSandbox - https://codesandbox.io/s/2wp7jk23kr
I have multiple columns in my table. Now in any column say column 1 to 10, I want to have a function which can calculate the position of the particular cell element (div). How can I get position of a particular div in a cell of a table. Please answer with respect to my demo. I am trying to get the position of data cells not header cells
I am using React and also vanilla JS to some small extent. I cannot use jQuery.
If possible, you can kindly fork/modify to show how to introduce this feature to my table.
I am not able to find solutions that is working on my code.
Please tell me how to find position with respect to both table and page

To calculate the cell offset within the table you could use getBoundingClientRect()
const tableRect = document.querySelector('table').getBoundingClientRect();
const cellRect = document.querySelector('#cell').getBoundingClientRect();
console.log(
cellRect.left - tableRect.left, // x
cellRect.top - tableRect.top // y
)
#cell { background: gold; }
<h1>Lorem ipsum</h1>
<table>
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
<tr>
<td>Foo</td>
<td id="cell">Find Me</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
</table>

Buefy: lock the table header and make only the rows scrollable

is there a way I can lock/make the header of the table component stick and only allow the rows to scroll?

One way I normally solve this problem is by using a Sticky Method, like this
There is a MAJOR con to this though, Sticky isn't supported by IE6-IE10
Check out the support here, to see if you would be interested in using this
I am currently looking into different ways.
enter link description here
table
{
Position: relative;
width: 100%;
text-align: center;
}
thead, th
{
background: black;
color: white;
border: none;
margin: 0;
padding: 0;
position: sticky;
top: 0;
}
<table>
<thead>
<tr>
<th>Name</th>
<th>State</th>
<th>Employeed</th>
</tr>
</thead>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<tr>
<td>Sara</td>
<td>FL</td>
<td>No</td>
</tr>
<table>

set div full height and width in click from another div

I am loading an html file into a content div based on a click from a menu bar. The HTML contains 5 tables but for some reason the div only shows the first 5 lines of the first table, then you need a scroll bar to view the rest of the tables. I want to see all the tables on a single view and only have the scroll bars if the information exceeds the screen. Any suggestions would help. I have tried to set the width and height to 100% on the div but that did not work. When I view the table HTML alone it looks the way I want it to.
Thanks for any and all help.
function load_codes() {
document.getElementById("content").innerHTML = '<object type="text/html" data="codes2.html" ></object>';
}
function load_mrgsql() {
document.getElementById("content").innerHTML = '<object type="text/html" data="mergesqlcode.html" ></object>';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebar">
<h2>Sidebar</h2>
<p>Open Merge Analysis WorkBook</p>
<p>
Open Merge Analysis SQL file
</p>
<p>
Common Merge Code List
</p>
<p>Merge Analysis Statistics</p>
<p>My Statistics</p>
</div>
<div id="content" style="height: auto; width:auto; min-height:100%; display: block; overflow: auto;">
<h1>Merge Analysis Tracking</h1>
<p>Welcome to the Merge Analysis Tracking Tool</p>
<p>Look around</p>
</div>
<!-- HTML with Tables (only 2 shown) -->
<body>
<table class="table">
<thead>
<tr>
<th colspan="3">Case Close Codes</th>
</tr>
</thead>
<tr>
<td>BFU</td>
<td>BIOLOGICAL FATHER UNKNOWN</td>
</tr>
<tr>
<td>DGC</td>
<td>IV-D GOOD CAUSE</td>
</tr>
<tr>
<td>DNO</td>
<td>NCP DECEASED</td>
</tr>
<tr>
<td>ERR</td>
<td>CASE ENTERED IN ERROR</td>
</tr>
<tr>
<td>FOR</td>
<td>FOREIGN</td>
</tr>
<tr>
<td>INC</td>
<td>INCARCERATED, INSTITUTIONALIZED, MEDICAL</td>
</tr>
<tr>
<td>JNC</td>
<td>INITIATING JURISDICTION NON COOPERATION</td>
</tr>
<tr>
<td>LCO</td>
<td>LOCATE ONLY</td>
</tr>
<tr>
<td>LOC</td>
<td>LOSS OF CONTACT</td>
</tr>
<tr>
<td>NCA</td>
<td>NO CURRENT ORDER/ARREARS
<$500</td>
</tr>
<tr>
<td>NCO</td>
<td>NON-COOPERATION</td>
</tr>
<tr>
<td>P21</td>
<td>PATERNITY 21</td>
</tr>
<tr>
<td>PBI</td>
<td>PATERNITY BEST INTEREST</td>
</tr>
<tr>
<td>PEX</td>
<td>PATERNITY EXCLUDED</td>
</tr>
<tr>
<td>QLO</td>
<td>QUICK LOCATE ONLY</td>
</tr>
<tr>
<td>RSC</td>
<td>RECIPIENT OF SERVICES REQUEST CLOSURE</td>
</tr>
<tr>
<td>UL1</td>
<td>UNABLE TO LOCATE 1 YEAR</td>
</tr>
<tr>
<td>UL3</td>
<td>UNABLE TO LOCATE 3 YEARS</td>
</tr>
</table>
<table class="-table">
<thead>
<tr>
<th colspan="4">Relationship Codes</th>
</tr>
</thead>
<tr>
<td>01</td>
<td>SELF</td>
</tr>
<tr>
<td>02</td>
<td>SPOUSE</td>
</tr>
<tr>
<td>05</td>
<td>CHILD</td>
</tr>
<tr>
<td>06</td>
<td>GRANDCHILD</td>
</tr>
<tr>
<td>07</td>
<td>NEPHEW OR NIECE</td>
</tr>
<tr>
<td>08</td>
<td>SIBLING</td>
</tr>
<tr>
<td>09</td>
<td>FIRST OR SECOND COUSIN</td>
</tr>
<tr>
<td>10</td>
<td>OTHER RELATIVE</td>
</tr>
<tr>
<td>13</td>
<td>UNBORN</td>
</tr>
<tr>
<td>15</td>
<td>STEP CHILD</td>
</tr>
<tr>
<td>16</td>
<td>STEP GRANDCHILD</td>
</tr>
<tr>
<td>17</td>
<td>STEP NEPHEW OR NIECE</td>
</tr>
<tr>
<td>18</td>
<td>STEP BROTHER OR SISTER</td>
</tr>
<tr>
<td>19</td>
<td>OTHER SPECIFIED RELATIVE</td>
</tr>
<tr>
<td>20</td>
<td>ATTORNEY</td>
</tr>
<tr>
<td>27</td>
<td>OTHER</td>
</tr>
<tr>
<td>28</td>
<td>FATHER</td>
</tr>
<tr>
<td>29</td>
<td>ALLEGED FATHER</td>
</tr>
<tr>
<td>30</td>
<td>STEP FATHER</td>
</tr>
<tr>
<td>31</td>
<td>GRAND FATHER</td>
</tr>
<tr>
<td>32</td>
<td>MOTHER</td>
</tr>
<tr>
<td>33</td>
<td>STEP MOTHER</td>
</tr>
<tr>
<td>34</td>
<td>GRAND MOTHER</td>
</tr>
<tr>
<td>35</td>
<td>SISTER</td>
</tr>
<tr>
<td>35</td>
<td>SISTER</td>
</tr>
<tr>
<td>36</td>
<td>AGENCY</td>
</tr>
<tr>
<td>36</td>
<td>AGENCY</td>
</tr>
<tr>
<td>37</td>
<td>AUNT</td>
</tr>
<tr>
<td>37</td>
<td>AUNT</td>
</tr>
<tr>
<td>38</td>
<td>UNCLE</td>
</tr>
<tr>
<td>38</td>
<td>UNCLE</td>
</tr>
<tr>
<td>39</td>
<td>BROTHER</td>
</tr>
<tr>
<td>39</td>
<td>BROTHER</td>
</tr>
<tr>
<td>40</td>
<td>ADOPTED CHILD</td>
</tr>
<tr>
<td>40</td>
<td>ADOPTED CHILD</td>
</tr>
<tr>
<td>99</td>
<td>UNKNOWN</td>
</tr>
<tr>
<td>99</td>
<td>UNKNOWN</td>
</tr>
</table>

If I understand your question correctly, you want to make the object have it's full height and not display scrollbars, instead of the other way around.
If so, you should be able to do something like this:
function load_codes() {
let elem = document.getElementById("content")
elem.innerHTML = '<object type="text/html" data="codes2.html" ></object>';
elem.onload = function(e) {
elem.style.height = e.contentWindow.document.body.offsetHeight;
}
}
That should get what you need. You may need to do additional css to remove the object's borders.

Rearrange table rows in hardcoded table

I am unable to edit the HTML directly in a form and would like to move some things around. I created a very simplified version of what is going on below. So for example, if I would like to move the row with class "comments" to just below the row with class "matching" how could I do this on page load?
I tried doing something like:
$('tr.comments').closest('tr').after($('tr.matching').closest('tr'));
Here is the basic code, thank you for your help!! :)
<table>
<tbody>
<tr class="designation">
<td>Some text</td>
</tr>
<tr class="comments">
<td>More text</td>
</tr>
</tbody>
<tbody>
<tr class="levels">
<td>level 1</td>
</tr>
<tr class="amount">
<td>$500</td>
</tr>
</tbody>
<tbody>
<tr class="matching">
<td>donor</td>
</tr>
<tr class="mailing">
<td>yes</td>
</tr>
</tbody>

Try with this $('tr.matching').after($('tr.comments'));.
$('tr.matching').after($('tr.comments'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr class="designation">
<td>Some text</td>
</tr>
<tr class="comments">
<td>More text</td>
</tr>
</tbody>
<tbody>
<tr class="levels">
<td>level 1</td>
</tr>
<tr class="amount">
<td>$500</td>
</tr>
</tbody>
<tbody>
<tr class="matching">
<td>donor</td>
</tr>
<tr class="mailing">
<td>yes</td>
</tr>
</tbody>
</table>

$(".matching").after($(".comments"));

MultiPage print with Javascript and CSS

I am facing issues showing page nos while printing multiple multipage reports
below is the sample HTML Format :
<style type="text/css"> body {
counter-reset: report 1 page 0;
}
td.footer:after {
counter-increment: page;
content: "Page " counter(page)" of Report " counter(report);
}
.rowLabel3 {
counter-reset: page 0;
counter-increment: report
}
</style>
<table>
<thead style="display: table-header-group;">
<tr>
<th>Report Specific Header Contents which needs to come on every page we are displaying report</th>
</tr>
</thead>
<tbody style="display: table-row-group;">
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
<tr>
<td>Some Data</td>
</tr>
</tbody>
<tfoot style="display: table-footer-group;">
<tr>
<td class="footer">
</td>
</tr>
</tfoot>
</table>
<div class="rowLabel3" style="page-break-after:always;">*** END OF REPORT ***</div>
<table>
<thead style="display: table-header-group;">
<tr>
<th>Report Specific Header Contents which needs to come on every page we are displaying report</th>
</tr>
</thead>
<tbody style="display: table-row-group;">
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
<tr>
<td>Some Data1</td>
</tr>
</tbody>
<tfoot style="display: table-footer-group;">
<tr>
<td class="footer">
</td>
</tr>
</tfoot>
</table>
<div class="rowLabel3" style="page-break-after:always;">*** END OF REPORT ***</div>​
Here , when Tfoot appear on each page It does not actually increment the section.
If this approach is correct what I have tried is also count the no of rows and then added extra row after 40 rows and add a page break with Page nos. But that is not consistent across different reports.

It's work like this :
body {
counter-reset: report 1 page 0 ;
}
td.footer:after {
counter-increment: page;
content: "Page " counter(page) " of Report " counter(report);
}
.rowLabel3{
counter-reset: page 1;
counter-increment: report
}
i just change #page and rename

Categories

Resources