Page Breaks on tables

Does anyone have a suggestion on how one might force a page break in docx such that short tables aren't split over two pages when converted from HTML?

You can add page breaks.

I tried the suggested approach but not getting a break.  Was testing usingg the website so not sure if the watermark will cause issues?  The style is set on the <tabel> tag in example below

<p>
1
</p>
<p>
2
</p>
<p>
3
</p>
<p>
4
</p>
<p>
5
</p>
<p>
6
</p>
<p>
7
</p>
<p>
8
</p>
<p>
9
</p>
<p>
10
</p>
<p>
11
</p>
<p>
12
</p>
<p>
13
</p>
<p>
14
</p>
<p>
15
</p>
<p>
16
</p>
<p>
17
</p>
<p>
18
</p>
<p>
19
</p>
<p>
20
</p>
<figure class="table" style="float:left;">
<table style="page-break-inside: avoid;">
<colgroup><col style="width:33.33%;"><col style="width:33.33%;"><col style="width:33.34%;"></colgroup>
<tbody>
<tr>
<td style="border-bottom:1.0pt solid windowtext;border-left-style:none;border-right-style:none;border-top:1.0pt solid windowtext;padding:0cm 1.4pt;vertical-align:top;width:49.45pt;">
<strong>Dishwasher Type</strong>
</td>
<td style="border-bottom:1.0pt solid windowtext;border-left-style:none;border-right-style:none;border-top:1.0pt solid windowtext;padding:0cm 1.4pt;vertical-align:top;width:51.95pt;">
<strong>Water Consumption&nbsp;</strong>(litres per rack)
</td>
<td style="border-bottom:1.0pt solid windowtext;border-left-style:none;border-right-style:none;border-top:1.0pt solid windowtext;padding:0cm 1.4pt;vertical-align:top;width:27.8pt;">
<p>
<strong>Idle Energy Rate&nbsp;</strong>
</p>
<p>
(kW per hour)
</p>
</td>
</tr>
<tr>
<td style="border-bottom:1.0pt dotted windowtext;border-left-style:none;border-right-style:none;border-top-style:none;padding:0cm 1.4pt;vertical-align:top;width:49.45pt;">
Under-counter
</td>
<td style="border-bottom:1.0pt dotted windowtext;border-left-style:none;border-right-style:none;border-top-style:none;padding:0cm 1.4pt;vertical-align:top;width:51.95pt;">
≤3
</td>
<td style="border-bottom:1.0pt dotted windowtext;border-left-style:none;border-right-style:none;border-top-style:none;padding:0cm 1.4pt;vertical-align:top;width:27.8pt;">
≤0.9
</td>
</tr>
<tr>
<td style="border-bottom:1.0pt dotted windowtext;border-left-style:none;border-right-style:none;border-top-style:none;padding:0cm 1.4pt;vertical-align:top;width:49.45pt;">
Stationary Single Tank Door
</td>
<td style="border-bottom:1.0pt dotted windowtext;border-left-style:none;border-right-style:none;border-top-style:none;padding:0cm 1.4pt;vertical-align:top;width:51.95pt;">
≤3
</td>
<td style="border-bottom:1.0pt dotted windowtext;border-left-style:none;border-right-style:none;border-top-style:none;padding:0cm 1.4pt;vertical-align:top;width:27.8pt;">
≤1
</td>
</tr>
<tr>
<td style="border-bottom:1.0pt solid windowtext;border-left-style:none;border-right-style:none;border-top-style:none;padding:0cm 1.4pt;vertical-align:top;width:49.45pt;">
Single and Multiple Tank Rack Conveyor
</td>
<td style="border-bottom:1.0pt solid windowtext;border-left-style:none;border-right-style:none;border-top-style:none;padding:0cm 1.4pt;vertical-align:top;width:51.95pt;">
≤2.9
</td>
<td style="border-bottom:1.0pt solid windowtext;border-left-style:none;border-right-style:none;border-top-style:none;padding:0cm 1.4pt;vertical-align:top;width:27.8pt;">
≤2.6
</td>
</tr>
</tbody>
</table>
<figcaption>
<span class="text-big"><strong>Minimum Dishwasher Water Consumption and Idle Energy Rates</strong></span>
</figcaption>
</figure>

That's not what the article suggests. One the CSS is wrong but two you use the div's with the style to define your pages.

I've updated to set the style in a div bit not getting expected break being avoided in the table

<p>
1
</p>
<p>
2
</p>
<p>
3
</p>
<p>
4
</p>
<p>
5
</p>
<p>
6
</p>
<p>
7
</p>
<p>
8
</p>
<p>
9
</p>
<p>
10
</p>
<p>
11
</p>
<p>
12
</p>
<p>
13
</p>
<p>
14
</p>
<p>
15
</p>
<p>
16
</p>
<p>
17
</p>
<p>
18
</p>
<p>
19
</p>
<p>
20
</p>
<div style="page-break-inside: avoid;">
<figure class="table" style="float:left;">
<table >
<colgroup><col style="width:33.33%;"><col style="width:33.33%;"><col style="width:33.34%;"></colgroup>
<tbody>
<tr>
<td style="border-bottom:1.0pt solid windowtext;border-left-style:none;border-right-style:none;border-top:1.0pt solid windowtext;padding:0cm 1.4pt;vertical-align:top;width:49.45pt;">
<strong>Dishwasher Type</strong>
</td>
<td style="border-bottom:1.0pt solid windowtext;border-left-style:none;border-right-style:none;border-top:1.0pt solid windowtext;padding:0cm 1.4pt;vertical-align:top;width:51.95pt;">
<strong>Water Consumption&nbsp;</strong>(litres per rack)
</td>
<td style="border-bottom:1.0pt solid windowtext;border-left-style:none;border-right-style:none;border-top:1.0pt solid windowtext;padding:0cm 1.4pt;vertical-align:top;width:27.8pt;">
<p>
<strong>Idle Energy Rate&nbsp;</strong>
</p>
<p>
(kW per hour)
</p>
</td>
</tr>
<tr>
<td style="border-bottom:1.0pt dotted windowtext;border-left-style:none;border-right-style:none;border-top-style:none;padding:0cm 1.4pt;vertical-align:top;width:49.45pt;">
Under-counter
</td>
<td style="border-bottom:1.0pt dotted windowtext;border-left-style:none;border-right-style:none;border-top-style:none;padding:0cm 1.4pt;vertical-align:top;width:51.95pt;">
≤3
</td>
<td style="border-bottom:1.0pt dotted windowtext;border-left-style:none;border-right-style:none;border-top-style:none;padding:0cm 1.4pt;vertical-align:top;width:27.8pt;">
≤0.9
</td>
</tr>
<tr>
<td style="border-bottom:1.0pt dotted windowtext;border-left-style:none;border-right-style:none;border-top-style:none;padding:0cm 1.4pt;vertical-align:top;width:49.45pt;">
Stationary Single Tank Door
</td>
<td style="border-bottom:1.0pt dotted windowtext;border-left-style:none;border-right-style:none;border-top-style:none;padding:0cm 1.4pt;vertical-align:top;width:51.95pt;">
≤3
</td>
<td style="border-bottom:1.0pt dotted windowtext;border-left-style:none;border-right-style:none;border-top-style:none;padding:0cm 1.4pt;vertical-align:top;width:27.8pt;">
≤1
</td>
</tr>
<tr>
<td style="border-bottom:1.0pt solid windowtext;border-left-style:none;border-right-style:none;border-top-style:none;padding:0cm 1.4pt;vertical-align:top;width:49.45pt;">
Single and Multiple Tank Rack Conveyor
</td>
<td style="border-bottom:1.0pt solid windowtext;border-left-style:none;border-right-style:none;border-top-style:none;padding:0cm 1.4pt;vertical-align:top;width:51.95pt;">
≤2.9
</td>
<td style="border-bottom:1.0pt solid windowtext;border-left-style:none;border-right-style:none;border-top-style:none;padding:0cm 1.4pt;vertical-align:top;width:27.8pt;">
≤2.6
</td>
</tr>
</tbody>
</table>
<figcaption>
<span class="text-big"><strong>Minimum Dishwasher Water Consumption and Idle Energy Rates</strong></span>
</figcaption>
</figure>
</div>

You are still not using the correct CSS style.

It doesn't work by avoiding page breaks you need to define the pages as shown in the article. Then put your content inside each page.

We are happy for the pages to break as they reach the limit of the content on the page we just want to avoid the tables being broken across two pages.

Can we do somesthing with this example

Avoid a page-break inside a <table>, <ul>, <ol> elements:: 

@media print {
  table, ul, ol {
    break-inside: avoid;
  }
}

No it doesn't work like that.

Is that confirmation that avoiding a break in a table is not supported in the current product? 

This is now supported by putting break-inside:avoid on the table or list. For more information see here.

Has this update been added to the downloadable javascript files?

It has been updated on the server side.

Because the converter doesn't render in docx the border of a div we have used table to create borders around content rather than lists with divs that have borders.  Is it possible that the update you made won't work if the table we are asking avoid the break is within a table cell?

This an example of code where a table is in a table which reults in an override/ignore of the style="page-break-inside: avoid;

<table>
<tr>
<td>
<p>
1
</p>
<p>
2
</p>
<p>
3
</p>
<p>
4
</p>
<p>
5
</p>
<p>
6
</p>
<p>
7
</p>
<p>
8
</p>
<p>
9
</p>
<p>
10
</p>
<p>
11
</p>
<p>
12
</p>
<p>
13
</p>
<p>
14
</p>
<p>
15
</p>
<p>
16
</p>
<p>
17
</p>
<p>
18
</p>
<p>
19
</p>
<p>
20
</p>
<figure class="table" style="float:left;">
<table style="page-break-inside: avoid; >
<colgroup><col style="width:33.33%;"><col style="width:33.33%;"><col style="width:33.34%;"></colgroup>
<tbody>
<tr>
<td style="border-bottom:1.0pt solid windowtext;border-left-style:none;border-right-style:none;border-top:1.0pt solid windowtext;padding:0cm 1.4pt;vertical-align:top;width:49.45pt;">
<strong>Dishwasher Type</strong>
</td>
<td style="border-bottom:1.0pt solid windowtext;border-left-style:none;border-right-style:none;border-top:1.0pt solid windowtext;padding:0cm 1.4pt;vertical-align:top;width:51.95pt;">
<strong>Water Consumption&nbsp;</strong>(litres per rack)
</td>
<td style="border-bottom:1.0pt solid windowtext;border-left-style:none;border-right-style:none;border-top:1.0pt solid windowtext;padding:0cm 1.4pt;vertical-align:top;width:27.8pt;">
<p>
<strong>Idle Energy Rate&nbsp;</strong>
</p>
<p>
(kW per hour)
</p>
</td>
</tr>
<tr>
<td style="border-bottom:1.0pt dotted windowtext;border-left-style:none;border-right-style:none;border-top-style:none;padding:0cm 1.4pt;vertical-align:top;width:49.45pt;">
Under-counter
</td>
<td style="border-bottom:1.0pt dotted windowtext;border-left-style:none;border-right-style:none;border-top-style:none;padding:0cm 1.4pt;vertical-align:top;width:51.95pt;">
≤3
</td>
<td style="border-bottom:1.0pt dotted windowtext;border-left-style:none;border-right-style:none;border-top-style:none;padding:0cm 1.4pt;vertical-align:top;width:27.8pt;">
≤0.9
</td>
</tr>
<tr>
<td style="border-bottom:1.0pt dotted windowtext;border-left-style:none;border-right-style:none;border-top-style:none;padding:0cm 1.4pt;vertical-align:top;width:49.45pt;">
Stationary Single Tank Door
</td>
<td style="border-bottom:1.0pt dotted windowtext;border-left-style:none;border-right-style:none;border-top-style:none;padding:0cm 1.4pt;vertical-align:top;width:51.95pt;">
≤3
</td>
<td style="border-bottom:1.0pt dotted windowtext;border-left-style:none;border-right-style:none;border-top-style:none;padding:0cm 1.4pt;vertical-align:top;width:27.8pt;">
≤1
</td>
</tr>
<tr>
<td style="border-bottom:1.0pt solid windowtext;border-left-style:none;border-right-style:none;border-top-style:none;padding:0cm 1.4pt;vertical-align:top;width:49.45pt;">
Single and Multiple Tank Rack Conveyor
</td>
<td style="border-bottom:1.0pt solid windowtext;border-left-style:none;border-right-style:none;border-top-style:none;padding:0cm 1.4pt;vertical-align:top;width:51.95pt;">
≤2.9
</td>
<td style="border-bottom:1.0pt solid windowtext;border-left-style:none;border-right-style:none;border-top-style:none;padding:0cm 1.4pt;vertical-align:top;width:27.8pt;">
≤2.6
</td>
</tr>
</tbody>
</table>
<figcaption>
<span class="text-big"><strong>Minimum Dishwasher Water Consumption and Idle Energy Rates</strong></span>
</figcaption>
</figure>
</td>
</tr>
</table>

Yes, it will be ignored because in docx keeonext needs to be applied to the wh9e table. So try putting the values on both tables.

If I apply to both tables then I will end up with significant amounts of white space throughout the reulstant document as I don't want the first (outer) table to break at the end of the page but don't want the shorter internal tables that sit inside the cells of the outer table to break. 

I don't believe that is possible inside a DOCX document. I have tried it myself and it doesn't seem to work.

I just tried the below and it pretty much the same as not having the style="page-break-inside: avoid;"

<table style="page-break-inside: avoid;">
<tr>
<td>
<p>
1
</p>
<p>
2
</p>
<p>
3
</p>
<p>
4
</p>
<p>
5
</p>
<p>
6
</p>
<p>
7
</p>
<p>
8
</p>
<p>
9
</p>
<p>
10
</p>
<p>
11
</p>
<p>
12
</p>
<p>
13
</p>
<p>
14
</p>
<p>
15
</p>
<p>
16
</p>
<p>
17
</p>
<p>
18
</p>
<p>
19
</p>
<p>
20
</p>
<figure class="table" style="float:left;">
<table style="page-break-inside: avoid; >
<colgroup><col style="width:33.33%;"><col style="width:33.33%;"><col style="width:33.34%;"></colgroup>
<tbody>
<tr>
<td style="border-bottom:1.0pt solid windowtext;border-left-style:none;border-right-style:none;border-top:1.0pt solid windowtext;padding:0cm 1.4pt;vertical-align:top;width:49.45pt;">
<strong>Dishwasher Type</strong>
</td>
<td style="border-bottom:1.0pt solid windowtext;border-left-style:none;border-right-style:none;border-top:1.0pt solid windowtext;padding:0cm 1.4pt;vertical-align:top;width:51.95pt;">
<strong>Water Consumption&nbsp;</strong>(litres per rack)
</td>
<td style="border-bottom:1.0pt solid windowtext;border-left-style:none;border-right-style:none;border-top:1.0pt solid windowtext;padding:0cm 1.4pt;vertical-align:top;width:27.8pt;">
<p>
<strong>Idle Energy Rate&nbsp;</strong>
</p>
<p>
(kW per hour)
</p>
</td>
</tr>
<tr>
<td style="border-bottom:1.0pt dotted windowtext;border-left-style:none;border-right-style:none;border-top-style:none;padding:0cm 1.4pt;vertical-align:top;width:49.45pt;">
Under-counter
</td>
<td style="border-bottom:1.0pt dotted windowtext;border-left-style:none;border-right-style:none;border-top-style:none;padding:0cm 1.4pt;vertical-align:top;width:51.95pt;">
≤3
</td>
<td style="border-bottom:1.0pt dotted windowtext;border-left-style:none;border-right-style:none;border-top-style:none;padding:0cm 1.4pt;vertical-align:top;width:27.8pt;">
≤0.9
</td>
</tr>
<tr>
<td style="border-bottom:1.0pt dotted windowtext;border-left-style:none;border-right-style:none;border-top-style:none;padding:0cm 1.4pt;vertical-align:top;width:49.45pt;">
Stationary Single Tank Door
</td>
<td style="border-bottom:1.0pt dotted windowtext;border-left-style:none;border-right-style:none;border-top-style:none;padding:0cm 1.4pt;vertical-align:top;width:51.95pt;">
≤3
</td>
<td style="border-bottom:1.0pt dotted windowtext;border-left-style:none;border-right-style:none;border-top-style:none;padding:0cm 1.4pt;vertical-align:top;width:27.8pt;">
≤1
</td>
</tr>
<tr>
<td style="border-bottom:1.0pt solid windowtext;border-left-style:none;border-right-style:none;border-top-style:none;padding:0cm 1.4pt;vertical-align:top;width:49.45pt;">
Single and Multiple Tank Rack Conveyor
</td>
<td style="border-bottom:1.0pt solid windowtext;border-left-style:none;border-right-style:none;border-top-style:none;padding:0cm 1.4pt;vertical-align:top;width:51.95pt;">
≤2.9
</td>
<td style="border-bottom:1.0pt solid windowtext;border-left-style:none;border-right-style:none;border-top-style:none;padding:0cm 1.4pt;vertical-align:top;width:27.8pt;">
≤2.6
</td>
</tr>
</tbody>
</table>
<figcaption>
<span class="text-big"><strong>Minimum Dishwasher Water Consumption and Idle Energy Rates</strong></span>
</figcaption>
</figure>
</td>
</tr>
</table>

That is correct, if the table is too large then Word has no choice but to break the table.

What might be the workaround then? Presumeabley adding an important to the avoid break on the inner table will make no difference in the translation to xhtml? 

I don't believe there is a work around. If the table is larger than a page it will have break anyway.

THe concern is not with the outer table but the inner tables that will be a couple of rows long and as such look untidy with header on one page and 3 rows on the next.  

Yes, I understand. But to keep a table together Word requires the whole table to have keep next applied to the paragraphs.

For instance is there a way to detect programmatically that the inner table is going to break and insert a pagebreak?

No, that's not possible as the document is not rendered until it is opened by Word 

Within the table property of the word document there is a property under the row tab called allow row to break across pages.It looks by default that the HTML to DocX engine is setting this to true.  Is it possible to have a setting that allows us to set this to false?  

This now works just add break-inside:avoid onto the row as explained here.