Web Yakalama ve Dönüştürme Araçları
Grabz's Çevrimiçi Topluluğu

Tablolarda Sayfa Sonları

Web sayfalarını veya HTML'yi nasıl yakalayacağınız veya dönüştüreceğinizle ilgili sorular sorun into Resimler, CSV, PDF veya DOCX belgeleri ve ayrıca videoların nasıl dönüştürüleceği intAPI'mızı kullanan animasyonlu GIF'ler.

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?

4 Eylül 2022'de isimsiz bir kişi tarafından soruldu

You can add page breaks.

GrabzIt Desteği tarafından 4 Eylül 2022'de yanıtlandı

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

 


1


2


3


4


5


6


7


8


9


10


11


12


13


14


15


16


17


18


19


20

<figure class="table" style="float:sol;">
<table style="page-break-inside: avoid;">
<colgroup><col style="width:33.33%;"><col style="width:33.33%;"><col style="width:33.34%;"></colgroup>


<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 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 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;">

<strong>Idle Energy Rate&nbsp;</strong>


(kW per hour)




<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 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 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 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 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 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 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 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 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





<span class="text-big"><strong>Minimum Dishwasher Water Consumption and Idle Energy Rates</strong></span>

15 Eylül 2022 tarihinde anonim tarafından yanıtlandı

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.

GrabzIt Desteği tarafından 15 Eylül 2022'de yanıtlandı

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

 


1


2


3


4


5


6


7


8


9


10


11


12


13


14


15


16


17


18


19


20

<div style="page-break-inside: avoid;">
<figure class="table" style="float:sol;">
<table >
<colgroup><col style="width:33.33%;"><col style="width:33.33%;"><col style="width:33.34%;"></colgroup>


<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 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 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;">

<strong>Idle Energy Rate&nbsp;</strong>


(kW per hour)




<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 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 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 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 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 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 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 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 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





<span class="text-big"><strong>Minimum Dishwasher Water Consumption and Idle Energy Rates</strong></span>


28 Eylül 2022 tarihinde anonim tarafından yanıtlandı

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.

GrabzIt Desteği tarafından 29 Eylül 2022'de yanıtlandı

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.

29 Eylül 2022 tarihinde anonim tarafından yanıtlandı

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;
  }
}

29 Eylül 2022 tarihinde anonim tarafından yanıtlandı

No it doesn't work like that.

GrabzIt Desteği tarafından 29 Eylül 2022'de yanıtlandı

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

29 Eylül 2022 tarihinde anonim tarafından yanıtlandı

This is now supported by putting break-inside:avoid on the table or list. For more information buraya bakın.

GrabzIt Desteği tarafından 29 Eylül 2022'de yanıtlandı

Has this update been added to the downloadable javascript files?

 

Answered by anonymous on the 3rd of October 2022

It has been updated on the server side.

GrabzIt Destek tarafından 3 Ekim 2022'da yanıtlandı

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?

6 Ekim 2022'de anonim tarafından yanıtlandı

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;

 





1


2


3


4


5


6


7


8


9


10


11


12


13


14


15


16


17


18


19


20

<figure class="table" style="float:sol;">
<table style="page-break-inside: avoid; >
<colgroup><col style="width:33.33%;"><col style="width:33.33%;"><col style="width:33.34%;"></colgroup>


<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 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 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;">

<strong>Idle Energy Rate&nbsp;</strong>


(kW per hour)




<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 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 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 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 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 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 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 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 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





<span class="text-big"><strong>Minimum Dishwasher Water Consumption and Idle Energy Rates</strong></span>




6 Ekim 2022'de anonim tarafından yanıtlandı

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.

GrabzIt Destek tarafından 7 Ekim 2022'de yanıtlandı

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. 

7 Ekim 2022'de anonim tarafından yanıtlandı

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

GrabzIt Destek tarafından 7 Ekim 2022'de yanıtlandı

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;">



1


2


3


4


5


6


7


8


9


10


11


12


13


14


15


16


17


18


19


20

<figure class="table" style="float:sol;">
<table style="page-break-inside: avoid; >
<colgroup><col style="width:33.33%;"><col style="width:33.33%;"><col style="width:33.34%;"></colgroup>


<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 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 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;">

<strong>Idle Energy Rate&nbsp;</strong>


(kW per hour)




<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 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 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 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 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 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 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 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 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





<span class="text-big"><strong>Minimum Dishwasher Water Consumption and Idle Energy Rates</strong></span>




7 Ekim 2022'de anonim tarafından yanıtlandı

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

GrabzIt Destek tarafından 7 Ekim 2022'de yanıtlandı

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? 

9 Ekim 2022'de anonim tarafından yanıtlandı

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

GrabzIt Destek tarafından 9 Ekim 2022'de yanıtlandı

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.  

9 Ekim 2022'de anonim tarafından yanıtlandı

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

GrabzIt Destek tarafından 9 Ekim 2022'de yanıtlandı

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

9 Ekim 2022'de anonim tarafından yanıtlandı

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

GrabzIt Destek tarafından 9 Ekim 2022'de yanıtlandı

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?  

2 Kasım 2022'de anonim tarafından yanıtlandı

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

GrabzIt Destek tarafından 2 Kasım 2022'de yanıtlandı