htmlの印刷でIEのみ余分な空白ページが出力される
現在asp.net mvc 5 にてBootstrapを使用したWebアプリを開発中ですが、
tableタグを使用したページをwindows.print()で印刷した際、IEのみ2ページ目に空白ページが表示されてしまいます。(IE11で確認しております。)
他のブラウザ(chrome,firefox,safari,edge)では1ページのみ出力され、空白ページは表示されません。
table内の行数が少ない場合は余分な空白ページは表示されず、行数が増えてページの半分ぐらいになると空白の2ページ目が表示されます。
各タグのborder-colorを変更して印刷したところ、tableやbody、htmlタグは全て1ページ目の半分ぐらいに収まっています。
余分な空白部分が何なのか、皆目見当がつかなくなってしまいました。
どのような原因が考えられるでしょうか?また、どのような対策が打てますでしょうか?
windows8.1, windows10で確認しております。
追記:
レスポンシブ対応で変更していたスタイルシートが影響を与えていたようです。
<style>
@media (max-width: 480px) {
.t-responsive tr,
.t-responsive td {
display: block;
}
}
</style>
しかし、印刷時のサイズは指定サイズに当てはまらないはずなのですが、なぜ影響を受けるのか分かりません。
コメントでご指摘頂いた通り、ソースコードを記載します。以下のdisplay: block;をコメントにすると1ページ印刷になります。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@media (max-width: 480px) {
.t-responsive tr,
.t-responsive td {
display: block;
}
}
</style>
</head>
<body>
<div id="checksheet-body">
<table class="table t-responsive">
<tbody>
<tr>
<th>日付1</th>
<th>野菜</th>
<th>単位</th>
<th>数量</th>
<th>(1)</th>
<th>(2)</th>
<th>(3)</th>
<th>単価</th>
<th>金額</th>
<th>日付2</th>
</tr>
</tbody>
<tbody>
<tr>
<td align="center">2017/03/06</td>
<td>
<span>ニラ</span>
</td>
<td align="center">Kg</td>
<td align="right">14.5</td>
<td align="right">5.5</td>
<td align="right">2.0</td>
<td align="right">7.0</td>
<td align="right">200</td>
<td align="right">2,900</td>
<td align="center">2017/03/06</td>
</tr>
<tr>
<td align="center">2017/03/13</td>
<td>
<span>しいたけ</span>
</td>
<td align="center">Kg</td>
<td align="right">13.2</td>
<td align="right">2.2</td>
<td align="right">3.0</td>
<td align="right">8.0</td>
<td align="right">210</td>
<td align="right">2,772</td>
<td align="center">2017/03/13</td>
</tr>
<tr>
<td align="center">2017/03/13</td>
<td>
<span>キャベツ</span>
</td>
<td align="center">Kg
</td>
<td align="right">9.0</td>
<td align="right">5.0</td>
<td align="right">1.0</td>
<td align="right">3.0</td>
<td align="right">200</td>
<td align="right">1,800</td>
<td align="center">2017/03/13</td>
</tr>
<tr>
<td align="center">2017/03/13</td>
<td>
<span>ニラ</span>
</td>
<td align="center">Kg</td>
<td align="right">8.0</td>
<td align="right">3.0</td>
<td align="right">3.0</td>
<td align="right">2.0</td>
<td align="right">200</td>
<td align="right">1,600</td>
<td align="center">2017/03/13</td>
</tr>
<tr>
<td align="center">2017/03/20</td>
<td>
<span>じゃがいも</span>
</td>
<td align="center">Kg</td>
<td align="right">16.0</td>
<td align="right">3.0</td>
<td align="right">2.5</td>
<td align="right">10.5</td>
<td align="right">200</td>
<td align="right">3,200</td>
<td align="center">2017/03/20</td>
</tr>
<tr>
<td align="center">2017/03/20</td>
<td>
<span>さつまいも</span>
</td>
<td align="center">Kg</td>
<td align="right">10.0</td>
<td align="right">2.0</td>
<td align="right">3.0</td>
<td align="right">5.0</td>
<td align="right">200</td>
<td align="right">2,000</td>
<td align="center">2017/03/20</td>
</tr>
<tr>
<td align="center">2017/03/20</td>
<td>
<span>しいたけ</span>
</td>
<td align="center"Kg
</td><td align="right">9.0
</td><td align="right">7.0
</td><td align="right">1.0
</td><td align="right">1.0
</td><td align="right">200
</td><td align="right">1,800
</td><td align="center">2017/03/20
</td>
</tr>
<tr><td align="center">2017/03/22
</td>
<td><span>たまねぎ
</span>
</td><td align="center">Kg
</td><td align="right">18.5
</td><td align="right">9.0
</td><td align="right">3.5
</td><td align="right">6.0
</td><td align="right">180
</td><td align="right">3,330
</td><td align="center">2017/03/22
</td>
</tr>
<tr>
<td align="center">2017/03/22</td>
<td>
<span>じゃがいも</span>
</td>
<td align="center">Kg</td>
<td align="right">13.5</td>
<td align="right">1.5</td>
<td align="right">7.0</td>
<td align="right">5.0</td>
<td align="right">210</td>
<td align="right">2,835</td>
<td align="center">2017/03/23</td>
</tr>
<tr>
<td align="center">2017/03/29</td>
<td>
<span>ネギ</span>
</td>
<td align="cen">Kg
</td><td align="right">12.0
</td><td align="right">2.0
</td><td align="right">9.0
</td><td align="right">1.0
</td><td align="right">200
</td><td align="right">2,400
</td><td align="center">2017/03/29
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>