dompdf page-break-inside：テーブルが動作しないようにしてください

Question

thとtdの両方のタグを同じページに保存します。私はthとtdというタグが1つだけある複数のテーブルを持っており、tableにはpage-break-inside: avoidを使用しましたが、私はこの結果を得ています：pdf file タイトルと内容を同じページに載せたいと思います。どのようにできるのか ？

EDIT：これは私のhtmlです：

<div id="compilazione_ordini"> 
    <table> 
     <tr><th>Ord5</th></tr> 
     <tr><td><textarea name='ordini[5][testo]'></textarea></td></tr> 
    </table>  
    <table> 
     <tr><th>Ord6</th></tr> 
     <tr><td><textarea name='ordini[6][testo]'></textarea></td></tr> 
    </table> 
</div> 

と私のCSS：

#compilazione_ordini table{ 
    border-collapse: collapse; 
    width:100%; 
    margin-bottom: 40px; 
} 
#compilazione_ordini th{ 
    border: 1px solid black; 
    font-size: 1.1em; 
    font-weight: bold; 
    padding: 2px; 
    text-align: left; 
} 
#compilazione_ordini textarea{ 
    border:none; 
    margin:0px; 
    width:100%; 
    height: 16em; 
    padding:2px; 
    resize:vertical; 
    font-family: sans-serif; 
    display: block; 
} 
#compilazione_ordini td{ 
    border: 1px solid black; 
} 

感謝。

Answer 1

Dompdf（最大0.7.1を含む）は、表要素（issue 1223）のページ区切りスタイルをサポートしていません。そのような小さなテーブルでは、それが解決するまで、ページ区切りスタイルをコンテナdivに追加することができます。異なるユースケース...直接あなたの質問ではなく、一般的に、テーブルヘッダに関連していない1のためのフォローアップ

.nobreak { 
 
    page-break-inside: avoid; 
 
} 
 
#compilazione_ordini table{ 
 
    border-collapse: collapse; 
 
    width:100%; 
 
    margin-bottom: 40px; 
 
} 
 
#compilazione_ordini th{ 
 
    border: 1px solid black; 
 
    font-size: 1.1em; 
 
    font-weight: bold; 
 
    padding: 2px; 
 
    text-align: left; 
 
} 
 
#compilazione_ordini textarea{ 
 
    border:none; 
 
    margin:0px; 
 
    width:100%; 
 
    height: 16em; 
 
    padding:2px; 
 
    resize:vertical; 
 
    font-family: sans-serif; 
 
    display: block; 
 
} 
 
#compilazione_ordini td{ 
 
    border: 1px solid black; 
 
}

<div class="compilazione_ordini"> 
 
    <div class="nobreak"> 
 
    <table> 
 
     <tr><th>Ord5</th></tr> 
 
     <tr><td><textarea name='ordini[5][testo]'></textarea></td></tr> 
 
    </table> 
 
    </div> 
 
    <div class="nobreak"> 
 
    <table> 
 
     <tr><th>Ord6</th></tr> 
 
     <tr><td><textarea name='ordini[6][testo]'></textarea></td></tr> 
 
    </table> 
 
    </div> 
 
</div>

---

。たとえば、ページごとにコンテンツ行の上にヘッダーを表示して表示する必要がある行が多い表があるとします。これは、THEAD要素に配置することで実行できます。あなたはこの画像を生成したコードを追加する必要があり

<table> 
 
    <thead> 
 
    <tr><th>Ord5</th></tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr><td><textarea name='ordini[5][testo]'></textarea></td></tr> 
 
    <tr><td><textarea name='ordini[5][testo]'></textarea></td></tr> 
 
    <tr><td><textarea name='ordini[5][testo]'></textarea></td></tr> 
 
    <tr><td><textarea name='ordini[5][testo]'></textarea></td></tr> 
 
    <tr><td><textarea name='ordini[5][testo]'></textarea></td></tr> 
 
    <tr><td><textarea name='ordini[5][testo]'></textarea></td></tr> 
 
    <tr><td><textarea name='ordini[5][testo]'></textarea></td></tr> 
 
    <tr><td><textarea name='ordini[5][testo]'></textarea></td></tr> 
 
    <tr><td><textarea name='ordini[5][testo]'></textarea></td></tr> 
 
    <tr><td><textarea name='ordini[5][testo]'></textarea></td></tr> 
 
    </tbody> 
 
</table>