1

現在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>
4
  • windows8.1, windows10で確認しております。
    – okaa
    Commented 2017年2月24日 11:42
  • 追加情報はコメントではなく"編集"から質問文に追記してください。
    – user10259
    Commented 2017年2月24日 11:57
  • 「最小限の・自己完結した・確認可能なサンプルコードの書き方」を参考に問題が再現するコードを質問に記載すると、回答が得られやすいです。
    – mjy
    Commented 2017年2月24日 17:12
  • @Myaku様、@mjy様 ご指摘ありがとうございます。以後気を付けます。
    – okaa
    Commented 2017年2月27日 4:55

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。