Optimizing pagination of HTML tables I'd like to share my implementation to you to confirm if it's a correct way to solve my problem. I have a list of products which have an attributes table and a description table (both in html_encoded strings). Every product starts at a new print-page using page break. When the attributes and description tables don't fit in one page I want to print the description in the next page.

My solution is to print the attributes table and then print the description div twice: once in the same page with the attributes and once at the next page using a page break; After the page has loaded using JavaScript, I measure the height of both attributes+description and if that is higher than 800 pixels (which means that two pages will be needed) I hide the first description. If their height is lower than 800 pixels (which means they can fit in the same page) I hide the second one.

(I know for certain that neither of the two tables will exceed one page by itself)

Is this a solid solution or are there possible cases in which it will lead to a big mess?

&lt;script&gt;
    function measure(){
        $total_count=document.getElementById("total_product_count").value;
        for(var i = 1; i &lt;= $total_count; i++){
            $description_id='description['+i+']';
            $second_description_id='description['+i+']_second';
            $attributes_id='attributes['+i+']'; 
            $combined_height = document.getElementById($description_id).clientHeight + document.getElementById($attributes_id).clientHeight;

            if($combined_height&gt;800){
                document.getElementById($description_id).style.display = 'none';
            }
            else{
                 document.getElementById($second_description_id).style.display = 'none';
            }

        } 
    }
&lt;/script

&lt;body onload="measure()"&gt;
.
.
.
&lt;input id="total_product_count" type="hidden" value="&lt;?php echo $total_product_count; ?&gt;" /&gt;

&lt;?php foreach ($products as $product) { ?&gt;
    &lt;div&gt;...small image + title....&lt;div/&gt;
    &lt;div  class="attribute" id="attributes[&lt;?php echo $product['product_count']; ?&gt;]" &gt;&lt;?php echo $product['attributes']; ?&gt;&lt;/div&gt;
    &lt;br/&gt;
    &lt;!--show the first description in the same page as attributes --&gt;
    &lt;div id="description[&lt;?php echo $product['product_count']; ?&gt;]" class="tab-content"&gt; &lt;?php echo $product['description']; ?&gt;&lt;/div&gt; 
    &lt;div id="second_description[&lt;?php echo $product['product_count']; ?&gt;]" class="tab-content"&gt;
           &lt;!-- show the second description at the next page --&gt; 
          &lt;p style="page-break-after: always; text-align: center;"&gt;&lt;/p&gt; 
          &lt;?php echo $product['description']; ?&gt;
    &lt;/div&gt; 
&lt;?php }?&gt;
This isn't an actual solution to your problem, but I noticed that you aren't using var to declare your JavaScript variables. Doing so automatically declares them in the global scope, which is a bad idea as a general rule of thumb and can quickly lead to unpredictable behavior. Declaring variables should be done like var myvar = myvalue:

&lt;script&gt;
    function measure(){
        var $total_count=document.getElementById("total_product_count").value;
        for(var i = 1; i &lt;= $total_count; i++){
            var $description_id='description['+i+']';
            var $second_description_id='description['+i+']_second';
            var $attributes_id='attributes['+i+']'; 
            $combined_height = document.getElementById($description_id).clientHeight + document.getElementById($attributes_id).clientHeight;

            if($combined_height&gt;800){
                document.getElementById($description_id).style.display = 'none';
            }
            else{
                 document.getElementById($second_description_id).style.display = 'none';
            }

        } 
    }
&lt;/script&gt;

...