span height?

[fuzzy1]

Hey All,
I have a table comprised of 13 six row "sections" distinguished by classNames "headerRow" or alternately "headerRow gray".
Each row contains a <textarea> which if Empty (or value="Note:") will hide (row.display='none') EXCEPT FOR the section headerRow.
This all works fine, however for print formatting I would like to insert a "page-break-before" each section IF and when it grows to a height which exceeds the lower page boundary.
To wit, it would be entirely possible for a user to write "War and Peace" within but a single row/textarea of a given "section", but for the intended use case, and user profile I am not too concerned about that.
Initially, I thought I would simply check position of the headerRow and insert a "page-break-before" if(headerRow.offsetTop > PagePrintHeight) but this would NOT account for the possiblity of the bottom row of the preceeding section also being greater than the specified PagePrintHeight.

Was thinking it might be possible to wrap table sections by <span>section rows</span> gauging by span height, but this doesn't seem to work either. Would be greatful for any suggestions.
Here's a TWO ROW sample "section":

PHP Code:

<script>
function spanHeight(){
var spanHt=document.getElementById('span_1').offsetHeight;
alert(spanHt);
}
</script> 

<table id="table1" border="4" cellpadding="0" style="border-collapse: collapse; position:absolute; left:3px; top:43px" bordercolor="#000080" width="689">
<span id="span_1" oncontextmenu="spanHeight(); return false;">
    <tr class="headerRow gray" id="grounds1">
            <td width="5" valign="top">&nbsp;</td>
            <td width="50" valign="top" align="center"><br>
            <b><font color="#FF0000">1</font></b></td>
            <td width="585"><b>Page 4&nbsp; GROUNDS</b><br>
            <textarea name="row_1"cols="100" rows="5" onclick="select()" >Note:</textarea></td>
            <td align="center" valign="top"><br>
            <input type="button" class="button" value="+" name="GD_1" onclick="if(document.Q_note.row_1.value !=='Note:')
            {show('grounds2', true);    document.Q_note.row_2.select();} else{document.Q_note.row_1.select(); return;}"></td>
    </tr>
        <tr id="grounds2" class="gray">    <td width="5" valign="top">&nbsp;</td>
            <td width="50" valign="top" align="center">
            <b><font color="#FF0000">2</font></b></td>
            <td width="585"><textarea name="row_2" cols="100" rows="5" onclick="select()" >Note:</textarea></td>
            <td align="center" valign="top">
            <input type="button" class="button" value="+" name="GD_2" onclick="if(document.Q_note.row_2.value !=='Note:')
            {show('grounds3', true ); document.Q_note.row_3.select();} else { myAlert();show('grounds2',false);}"></td>
        </tr>
    </span>
</table> 


[VIPStephan]

Simple solution: don’t use a table at all. I’m sure it’s not correct in this context anyway. With divisions page breaks are much easier as the occur automatically according to the height of an element and the available height on the page – and it would be semantically correct.

[fuzzy1]

Okay, Thanks VIPStephan,
I'll consider re-thinking 800 lines of code and the script to hide the empty rows (see below), but what's really piqued my curriosity now is your assertion that...

I’m sure it’s not correct in this context anyway.

Please explain.
The following was my best effort at collapsing the sections to hide un-used rows. Not sure how to go about differently (non-table layout). Any thoughts?

PHP Code:

<script language="JavaScript">

function showNotes() {
var tbl,rows;
    if(document.getElementById && document.getElementsByTagName) {
        tbl = document.getElementById('table1');
        rows = tbl.getElementsByTagName('tr');
        } 
    for(var i=1;i<rows.length;i++) {
        var rowID=rows[i].id;
        //alert(rowID);
        if((document.Q_note.elements['row_'+(i)].value == 'Note:') 
            && (rows[i].className !='headerRow')
                && (rows[i].className !='headerRow gray')) {
        document.getElementById(rowID).style.display='none';
        } 
     }
}
function myAlert(){
alert('No notes. Hiding This Row.');
}
</script> 


[abduraooft]

How about making the rows like http://www.webcredible.co.uk/user-fr...ss-forms.shtml
and wrap the required rows inside a div instead of span ?

[fuzzy1]

Thank You abduraooft,
I have visited http://www.webcredible.co.uk/user-fr...ss-forms.shtml in the past for tips on forms style, but I'm not clear on your meaning in

making the rows like http://www.webcredible.co.uk/user-fr...ss-forms.shtml

I see no "rows" in the source code there. Cetrainly, wraping the rows with DIV tags was my first impulse, but I don't think it possible to wrap my table "sections" (group of rows) with a DIV as with a SPAN? (only within cells?)

[abduraooft]

They have used <p></p> instead of table's <tr></tr>

[fuzzy1]

Thanks Again abduraooft,
It's been a while since I had any opportunity to focus on this.
I have worked out an alternative employing both <div><p></div>
and while the code is admitadly cleaner than my table approach,
the result is only a marginal improvement in terms of printablility.

For anyone who might stumble across this post looking for a similar solution,
it seems that the browsers just aren't quite ready for robust print media complete with headers, footers etc. Looking now into the possibliity of a php work around. I will post if I find a suitable solution.