Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations IamaSherpa on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Page break in table

Status
Not open for further replies.

TimBiesiek

Programmer
Nov 3, 2004
151
AU
Hi all,

I am trying to create a print version of a communcations directory, using ASP, HTML and CSS.

I have no problems with the ASP side of things, but when I am trying to print the table it is cutting off names at the bottom of the page. I have read through some of the articles on here, and read numerous other articles on the web about the page-break-before CSS and so forth, but nothing I have tried has worked. I am using an internal CSS.

I'm hoping someone here can help me.

Code for page is:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]

<%
'Ensure that this page is not cached on the client.
Response.CacheControl = "no-cache"
Response.AddHeader "Pragma", "no-cache"
Response.Expires = -1
%>

<html>
<head>
<title>Communications Directory</title>
<style type="text/css">
<!--
.style1 {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 12px;
	visibility:visible
}
.style2 {
	font-family: Arial, Helvetica, sans-serif;
	visibility:visible
	}
.style3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	visibility:visible
}
.style4 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color:#FFFFFF;
	visibility:visible
}
TABLE {
	text-align:left;
	border-top: solid 0px #000000;
	border-right: solid 0px #000000;
	border-bottom:solid 0px #000000;
	border-left:solid 0px #000000;
	visibility:visible;
	page-break-inside: avoid;
}

td { page-break-inside: avoid; }

th {
	border-bottom: solid 1px #000000;
	visibility:visible
}

tr {
	page-break-before:always;
	page-break-inside: avoid;
}

tr.breakme {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	visibility:visible;
	page-break-before:always;
	page-break-inside: avoid;
	color:#FF0000;
}

P.breakhere {page-break-before: always}

-->
</style>
<body>
<div id="Listing" align="center" style="position:absolute; left:0px; top:0px; width:800px; height:auto; z-index:1">
  <div id="Printing" style="position:absolute; left:748px; top:4px; width:50px; height:42px"><a href="javascript:window.print()"><img src="../images/printer.gif" width="51" height="46"></a></div>
  <%
	on error resume next
	
	dim StrLastLetter

	strSQL = "SELECT Name_Last, Name_Known_As, Position, Extn_Extn2, Direct_Dial_No, Mobile_No, Location, Office, Department_Name, Reference_Ind, GID_User_Name, GUID FROM PSN_PERSONS "
	strsql = strsql & "WHERE STATUS = 'A' AND (TYPE1 = 'Y' OR TYPE2 = 'Y') AND (EXTN_EXTN2 IS NOT NULL OR DIRECT_DIAL_NO IS NOT NULL OR MOBILE_NO IS NOT NULL) "
	strsql = strsql & "ORDER BY NLSSORT(Name_Last, 'NLS_SORT=BINARY_CI'), Name_Known_As"
	
	set conSQL = Server.CreateObject("ADODB.Connection")

	conSQL.ConnectionString = sConnStr
	conSQL.Open

	Set RstPeople = Server.CreateObject("ADODB.Recordset") 

	if conSQL.Errors.Item(1).Number = 0 Then
		conSQL.Errors.Clear
	end if
	
	if conSQL.Errors.Count = 0 Then
		With rstPeople
			.ActiveConnection = sConnStr
			.Source = strSQL
			.CursorType = adOpenStatic
			.CursorLocation = 3
			.LockType = 1
			.Open()
		End With
	end if

	StrLastLetter = ""

%>
<p>
	<table width='785' border='0' cellspacing='0' cellpadding='0'>
            <tr>
            <th style='width:15px'></th>
            <th style='width:100px'>Name</th>
            <th style='width:100px' class='style4' color=#FFFFFF>.</th>
            <th style='width:120px'>Extn.</th>
            <th style='width:150px'>Locn.</th>
            <th style='width:150px'>Dept.</th>
            <th style='width:150px'>Cellphone</th>
            </tr>
    		<tr class='style3'>
    
    <%

	i=1

	do while not rstPeople.eof
		i=i+1
		if i =38 then			
			%>
            </table>
            </p>
            <P CLASS="breakhere">

			<table width='785' border='0' cellspacing='0' cellpadding='0'>
            <tr>
            <th style='width:15px'></th>
            <th style='width:100px'>Name</th>
            <th style='width:100px' class='style4' color=#FFFFFF>.</th>
            <th style='width:120px'>Extn.</th>
            <th style='width:150px'>Locn.</th>
            <th style='width:150px'>Dept.</th>
            <th style='width:150px'>Cellphone</th>
            </tr>
    		<tr class='style3'>
            
            <%
			i=1
		else
			response.write("<tr class='style3'>")
		end if
		
		if lcase(StrLastLetter) <> lcase(left(rstpeople("Name_Last"),1)) then			
			StrLastLetter = left(rstpeople("Name_Last"),1)
			response.write("<td align='left'><b>" & ucase(StrLastLetter) & "</b></td>")			
		else
			response.write("<td align='left'></td>")			
		end if

		response.write("<td align='left' height='24px'>" & rstPeople("Name_Last") & "</td>")
		response.write("<td align='left'>" & rstPeople("Name_Known_As") & "</td>")		
		if isnull(rstPeople("Extn_Extn2")) then
			if isnull(rstPeople("Direct_Dial_No")) then
				response.Write("<td align='left'>&nbsp;</td>")
			else
				response.write("<td align='left'>" & rstPeople("Direct_Dial_No") & "</td>")
			end if
		else
			response.write("<td align='left'>" & rstPeople("Extn_Extn2") & "</td>")
		end if
		if isnull(rstPeople("Office")) then
			if isnull(rstPeople("Location")) then
				response.Write("<td align='left'>&nbsp;</td>")
			else
				response.write("<td align='left'>" & rstPeople("Location") & "</td>")
			end if
		else
			response.write("<td align='left'>" & rstPeople("Office") & "</td>")
		end if
		if isnull(rstPeople("Department_Name")) then
			response.Write("<td>&nbsp;</td>")
		else
			response.write("<td align='left'>" & rstPeople("Department_Name") & "</td>")
		end if
		if isnull(rstPeople("Mobile_No")) then
			response.Write("<td>&nbsp;</td>")
		else
			response.write("<td>" & rstPeople("Mobile_No") & "</td>")
		end if
		response.write("</tr>")
		rstPeople.MoveNext
	loop
	
	%>
</table>
</p>
</div>
</body>

</html>

I read somewhere that you can't do a page break within a table, hence why after 38 rows I have closed the table tag, tried the page break, then started another table. It doesn't work this way, or if I just tried the page break inside the table...
 
Well, ok then, I have stripped out a lot of the tables and data, as there are 14 pages of them. I have left in the first and the last ones, as they are all exactly the same, since they are genereated by server side code.

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]



<html>
<head>
<title>STOS Communications Directory</title>
<style type="text/css">
<!--
.style1 {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 12px;
	visibility:visible
}
.style2 {
	font-family: Arial, Helvetica, sans-serif;
	visibility:visible
	}
.style3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	visibility:visible
}
.style4 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color:#FFFFFF;
	visibility:visible
}
TABLE {
	text-align:left;
	border-top: solid 0px #000000;
	border-right: solid 0px #000000;
	border-bottom:solid 0px #000000;
	border-left:solid 0px #000000;
	visibility:visible;
	page-break-inside: avoid;
}

td { page-break-inside: avoid; }

th {
	border-bottom: solid 1px #000000;
	visibility:visible
}

tr {
	page-break-before:always;
	page-break-inside: avoid;
}

tr.breakme {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	visibility:visible;
	page-break-before:always;
	page-break-inside: avoid;
	color:#FF0000;
}

P.breakhere {page-break-before: always}

-->
</style>
<body>
<div id="Listing" align="center" style="position:absolute; left:0px; top:0px; width:800px; height:auto; z-index:1">
  <div id="Printing" style="position:absolute; left:748px; top:4px; width:50px; height:42px"><a href="javascript:window.print()"><img src="../images/printer.gif" width="51" height="46"></a></div>
  
<p>
	<table width='785' border='0' cellspacing='0' cellpadding='0'>
            <tr>
            <th style='width:15px'></th>
            <th style='width:100px'>Name</th>
            <th style='width:100px' class='style4' color=#FFFFFF>.</th>
            <th style='width:120px'>Extn.</th>
            <th style='width:150px'>Locn.</th>
            <th style='width:150px'>Dept.</th>
            <th style='width:150px'>Cellphone</th>
            </tr>
    		<tr class='style3'>
    
    <td align='left'><b>A</b></td><td align='left' height='24px'>Aadvark</td><td align='left'>Sam</td><td align='left'>6547</td><td align='left'>800</td><td align='left'>HR</td><td>057 879 74561</td></tr>
.....
            </table>
            </p>

            <P CLASS="breakhere">

			<table width='785' border='0' cellspacing='0' cellpadding='0'>
            <tr>
            <th style='width:15px'></th>
            <th style='width:100px'>Name</th>
            <th style='width:100px' class='style4' color=#FFFFFF>.</th>
            <th style='width:120px'>Extn.</th>
            <th style='width:150px'>Locn.</th>
            <th style='width:150px'>Dept.</th>
            <th style='width:150px'>Cellphone</th>
            </tr>
    		<tr class='style3'>
            
            <td align='left'></td><td align='left' height='24px'>Wilco</td><td align='left'>Roger</td><td align='left'>111111</td><td align='left'>A Company</td><td>&nbsp;</td><td>&nbsp;</td></tr>
</table>
</p>
</div>
</body>

</html>
 
Hi

TimBiesiek said:
nothing I have tried has worked.
And in which browser you tried ?
TimBiesiek said:
when I am trying to print the table it is cutting off names at the bottom of the page.
Now seeing your HTML I wonder why are you involving the [tt]page-break-*[/tt] rules.

If the bottom of the page is cut off, you should set the printer, the printer driver or the browser's print settings.

If you want to have the table header and/or footer on every page, then you only have to wrap the header and footer in [tt]thead[/tt] and [tt]tfoot[/tt] tags respectively, then the browser will repeat them on every page. ( Note that both [tt]thead[/tt] and [tt]tfoot[/tt] must be before [tt]tbody[/tt]. )


Feherke.
 
feherke said:
And in which browser you tried ?

IE7. This is on our work PCs and we are pretty locked down as to what we can use.

feherke said:
Now seeing your HTML I wonder why are you involving the page-break-* rules.

I started using these after a google search of my problem, and everywhere I found stated that using the page-break-* rules would fix the problem of lines being cut off...
 
It is only HTML pages that are getting cut off at the bottom, so it isn't the printer driver or printer. If the margins are changed then different pages will be cut off.

Can anyone help?
 
Surely there must be someone on here that can help further, or point me in the right direction?
 
I may be wrong, but I seem to recall that page break css instructions were only acted on when the media type was set to a paged medium. See for a bit more info.

If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
 
A paged medium, like a printer? Yes, that is what I thought too, but whenever this is printed, it still cuts off the bottom line half way through. As in the bottom half of the words doesn't show, and they show at the top of the next page.
 
Do you not have to specify media type (as in the example I linked to)?

If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
 
I wouldn't think you would have to johnwm... If it's not specified then it should use the style for all mediums... I'll give it a go tho, thanks...
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top