【CSS】「page-break-inside: avoid」が効かない

【CSS】「page-break-inside: avoid」が効かない

印刷を考慮したページを作成していました。

その中で改ページを回避するために記述した「page-break-inside: avoid」が効かない部分がありました。

すぐに解決できましたが、すぐに忘れそうなのでメモです。

こんなイメージです。

テーブルの列の中で改ページするのを回避したつもりでした。

<style>
.noBreak {
  page-break-inside: avoid;
}
</style>

<table>
  <thead>
    <tr>
      <th>ヘッダ1</th>
      <th>ヘッダ2</th>
      <th>ヘッダ3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="noBreak" >値1</td>
      <td class="noBreak" >値2</td>
      <td class="noBreak" >値3</td>
    </tr>
    <tr>
      <td class="noBreak" >値4</td>
      <td class="noBreak" >値5</td>
      <td class="noBreak" >値6</td>
    </tr>
  </tbody>
</table>

tdタグ内で改ページを回避するクラスが設定されています。

しかし、実際に画面を印刷しようとすると、改ページが行われていました。

このように修正することで解決することができました。

<style>
.noBreak {
  page-break-inside: avoid;
}
</style>

<table>
  <thead>
    <tr>
      <th>ヘッダ1</th>
      <th>ヘッダ2</th>
      <th>ヘッダ3</th>
    </tr>
  </thead>
  <tbody>
    <tr class="noBreak" >
      <td>値1</td>
      <td>値2</td>
      <td>値3</td>
    </tr>
    <tr class="noBreak" >
      <td>値4</td>
      <td>値5</td>
      <td>値6</td>
    </tr>
  </tbody>
</table>

tdタグではなく、trタグにクラスを指定しています。

考えてみれば、改ページは行単位で行われるので当然かもしれませんね。