CSS and Page breaks

I am trying to dynamically assign page breaks for a page that has several tables. Goal is if table grows beyond a page to insert a break and start the table on a new page. I hav tried several combinations of using page-break-always in my css page wrapping a div around every table, like so:

div {
page-break-after: always;
}

table {
page-break-after: auto;
}


and also div tags inbetween tables, like so:

<DIV style="page-break-after:auto"></DIV>.


I feel I am close, but it's not working correctly. It still runs a table over from one page to the next.



Does that make sense? Any ideas?

can you show us your full code please, or give us a link so we can test different solutions.

<style type="text/css">
div {
page-break-after: always;
}

table {
page-break-after: auto;
}

tr {
font-family : Arial, Helvetica, sans-serif;
font-size : 16;
text-align : left;
}

td {
font-family: Arial;
font-size: 16;
font-weight: bold;
padding: 2px;
text-align : left;
}
</style>



<div>
<table>
<tr>
<td>some table content</td>
</tr>
</table>
</div>


<div>
<table>
<tr>
<td>some table content</td>
</tr>
</table>
</div>


<div>
<table>
<tr>
<td>some table content</td>
</tr>
</table>
</div>


<div>
<table>
<tr>
<td>some table content</td>
</tr>
</table>
</div>

Hmm that should work, at least when I go to print preview it shows 5 pages being printed only because the last page comes from the page break after the last table. You might want to set a height to the divs so as its no larger than a 81/2 by 11in sheet of paper.