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?

    function measure(){
        $total_count=document.getElementById("total_product_count").value;
        for(var i = 1; i 800){
                document.getElementById($description_id).style.display = 'none';
            }
            else{
                 document.getElementById($second_description_id).style.display = 'none';
            }

        } 
    }

.
.
.
" />

    ...small image + title....
    ]" >
    
    
    ]" class="tab-content">  
    ]" class="tab-content">
            
           
          
     

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:

    function measure(){
        var $total_count=document.getElementById("total_product_count").value;
        for(var i = 1; i 800){
                document.getElementById($description_id).style.display = 'none';
            }
            else{
                 document.getElementById($second_description_id).style.display = 'none';
            }

        } 
    }

...

StackExchange Code Review Q#76961, answer score: 2