テーブルセルの内容が大きすぎる場合、1 trでテーブルの改ページを設定するにはどうすればよいですか？

Question

私はdivのコンテナに4つのテーブルを持っています。私は最後のテーブルをページに合わせるのに問題があります。最後のテーブルには1つのテーブルセルしかありません。このtdセルの高さは200pxに設定されています。私は最後のテーブルにpage-breakを設定できるかどうか疑問に思います。ここに私のテーブルの例である：ここでは

<table class="srTable"> 
    <thead> 
     <tr> 
      <th>Summary</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td id="summary"></td> 
     </tr> 
    </tbody> 
</table> 

は私のCSSです：

table.srTable { 
    margin-top: 5px; 
    margin-bottom: 5px; 
    width: 100%; 
    border: 1px solid black; 
    border-collapse: collapse; 
} 
table.srTable th { 
    text-align: center; 
    border: 1px solid black; 
    background-color: #E0DBDD; 
} 
table.srTable td { 
    height: 180px; 
    text-align: left; 
    vertical-align: top; 
} 

@media print { 
    table.srTable { page-break-after:auto } 
    table.srTable tr { page-break-inside:avoid; page-break-after:auto } 
    table.srTable td { page-break-inside:avoid; page-break-after:auto } 
} 

srTableのコンテンツがページに収まらない場合は、私は次のページでentierの表を参照してくださいしたいと思います。上記のコードは機能しませんでした。テーブルは最初のページにとどまり、私のTDセルのボトムボーダーは見えませんでした。

Answer 1

もっと簡単なソリューションを使用できます。 table.srTableにはpage-break-inside: avoid;と設定する必要があります。 <tr>または<td>のための他のルールは必要ありません。

table.srTable { 
 
    margin: 5px 0; 
 
    width: 100%; 
 
    border: 1px solid black; 
 
    border-collapse: collapse; 
 
} 
 
table.srTable th { 
 
    text-align: center; 
 
    border: 1px solid black; 
 
    background-color: #E0DBDD; 
 
} 
 
table.srTable td { 
 
    height: 180px; 
 
    text-align: left; 
 
    vertical-align: top; 
 
} 
 
div { 
 
height:98vh; 
 
} 
 
@media print { 
 
    table.srTable { 
 
    page-break-inside: avoid; 
 
    } 
 
}

<div></div> 
 
<table class="srTable"> 
 
    <thead> 
 
    <tr> 
 
     <th>Summary</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td id="summary"></td> 
 
    </tr> 
 
    </tbody> 
 
</table>