Floating tables to top

AndrewO
3 Jan 2007

Hi,

I'm trying to float my tables to the tops of pages, but they keep overflowing where they shouldn't. (Sorry for pasting in so much code, but it was easier than trying to describe my setup).

Here's my stylesheet:

@page {
  size: 8.5in 11in;
}

table {
	border: 1pt solid black;
	float: top;
}

.chapter {
	page-break-before: right;
	clear: top;
}

And here's a fragment of my html:

<body>
	<div>
	<h1>Chapter 1</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	(repeated 3 times)
	<table>
		<tr>
			<td>12356789</td><td>12356789</td><td>12356789</td>
		</tr>
		<tr>
			<td>12356789</td><td>12356789</td><td>12356789</td>
		</tr>
		<tr>
			<td>12356789</td><td>12356789</td><td>12356789</td>
		</tr>
		<tr>
			<td>12356789</td><td>12356789</td><td>12356789</td>
		</tr>
		<tr>
			<td>12356789</td><td>12356789</td><td>12356789</td>
		</tr>
		<tr>
			<td>12356789</td><td>12356789</td><td>12356789</td>
		</tr>
	</table>
	(repeated 4 times)
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	(repeated 3 times)
	<table>
		<tr>
			<td>12356789</td><td>12356789</td><td>12356789</td>
		</tr>
		<tr>
			<td>12356789</td><td>12356789</td><td>12356789</td>
		</tr>
		<tr>
			<td>12356789</td><td>12356789</td><td>12356789</td>
		</tr>
		<tr>
			<td>12356789</td><td>12356789</td><td>12356789</td>
		</tr>
		<tr>
			<td>12356789</td><td>12356789</td><td>12356789</td>
		</tr>
		<tr>
			<td>12356789</td><td>12356789</td><td>12356789</td>
		</tr>
	</table>
	(repeated once more)
	</div>
	<div>
		<h1>Chapter 2</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	</div>
</body>

(The forum's code blocks appear to be eating my class="chapter" attributes in the div tags.)

The tables end up at the top of the next chapter instead of getting new pages. Is there any way to prevent this and get Prince to add new pages before the next chapter?

Thanks,
Andrew

mikeday
3 Jan 2007

Hi Andrew,

When I run your sample I get the tables floating to the top of the first page (Chapter 1), and not appearing on a separate page at all. Would you be able to email me an example PDF file showing the problem?

Best regards,

Michael

AndrewO
4 Jan 2007

Hi Michael,

Did you copy the paragraphs and tables multiple times? I was trying to not post a huge mass of essentially meaningless HTML, so I wrote "(repeated X times) under a couple of the <p>'s and <tables>, which was probably unnecessary...

I don't have acess to the files I used earlier, but I'll send them when I do.

What I was trying to get out was something like this method, except for print, and for top floating. (Although looking at the what I posted, I may not even have been testing the right thing -- the element with "clear: top" should probably be in the same div as the paragraphs and tables). What I was assuming was that, like how in the example in the link above, the content box is stretched to accomodate the cleared element, the page flow would grow to accomodate top-cleared element.

Sorry if this confuses the issue anymore. I'll post with better examples when I get back to work in the morning.

Andrew

Forum › How do I...?