スクロールを含む画面で印刷をした際に表とボタンがかぶって印刷されてしまう

Question

前提・実現したいこと

ホームページ内に一部スクロールがありますが、印刷しようとするとスクロールが表示された部分とコメントおよびボタンの部分がかぶってしまいます。
かぶらないように印刷させる方法はございますでしょうか？

発生している問題・エラーメッセージ

スクロール画面(最大20行程度)を含む形で印刷(PDF)するとコメント欄やボタンの上に表示されてしまう。

該当のソースコード

<div style="top : 161px;left : 8px; position : absolute; z-index : 4; width : 847px; height : 252px; " id="Layer5">
  <div style="background: white; padding: 10px; margin-bottom: 10px; border: 1px solid #333333;" class="test">
    <table border="1" height="252" width="818">
      <tr bgcolor="gray" style="color:white"  height="50">
        <th height="42" size=10><b>注文日</b></th>
        <th height="42" width="212">品物・オプション<br>注文先・単価</th>
        <th height="42" size=10>金額/個数</th>
        <th height="42" size=20><b>発注者/入力者</b></th>
      </tr>

      <% for(var i in content) { %>
      <tr bgcolor="lightyellow" >
        <% var obj = content[i]; %>
          <td align="center" height="47" size="10">
            <input type="text" name=注文日  size="10" style="background:white; color:#000000;" align="middle" value="注文日" disabled="disabled">
          </td>
          <td align="center" height="47" width="10" style="white-space:nowrap;" >
            <input type="text" name=品物 size=4 style="background:white; color:#000000;" align="middle" value="<%= obj.品物 %>" disabled="disabled">
            <input type="text" name=option size=1 style="background:white; color:#000000;" align="middle" value="" disabled="disabled">
            <input type="text" name=品物2 size=4 style="background:white; color:#000000;" align="middle" value="<%= obj.品物2 %>" disabled="disabled">
            <input type="text" name=option2 size=1 style="background:white; color:#000000;" align="middle" value="" disabled="disabled">
            <input type="text" name=品物3 size=4 style="background:white; color:#000000;" align="middle" value="<%= obj.品物3 %>" disabled="disabled">
            <input type="text" name=option3 size=1 style="background:white; color:#000000;" align="middle" value="" disabled="disabled"><br>
            <input type="text" name=tyumonsaki size=4 style="background:white; color:#000000;" align="middle" value="<%= obj.order_destination %>" disabled="disabled">
            <input type="text" name=単価 size=1 style="background:white; color:#000000; text-align: right;" align="middle" value="<%= obj.単価 %>" disabled="disabled">
            <input type="text" name=tyumonsaki2 size=4 style="background:white; color:#000000;" align="middle" value="<%= obj.order_destination2 %>" disabled="disabled">
            <input type="text" name=単価2 size=1 style="background:white; color:#000000; text-align: right;" align="middle" value="<%= obj.単価2 %>" disabled="disabled">
            <input type="text" name=tyumonsaki3 size=4 style="background:white; color:#000000;" align="middle" value="<%= obj.order_destination3 %>" disabled="disabled">
            <input type="text" name=単価3 size=1 style="background:white; color:#000000; text-align: right;" align="middle" value="<%= obj.単価3 %>" disabled="disabled">
        </td>
        <td align="center" height="47" size=10>
          <input type="text" name=合計金額 size=10 style="background:white; color:#000000; text-align: right;" align="middle" value="<%= obj.合計金額 %>" disabled="disabled">
          <input type="text" name=合計数 size=10 style="background:white; color:#000000; text-align: right;" align="middle" value="<%= obj.合計数 %>" disabled="disabled">
        </td>
        <td align="center" height="47" size=20>
          <input type="text" disabled="disabled" name=発注者 size=20 style="background:white; color:#000000;" align="middle" value="<%= obj.発注者 %>">
          <input type="text" disabled="disabled" name=入力者 size=20 style="background:white; color:#000000;" align="middle" value="<%= obj.入力者 %>">
        </td>
      </tr>
      <% } %>
    </table>
  </div>
</div>

 <div style="width : 468px;height : 16px;top : 486px;left : 441px; position : absolute; z-index : 2; " id="Layer7" align="right">
  <input type="submit" value=" 結果 " disabled="disabled" >
  <input type="button" value=" 戻　　り ">
 </div>

 <div style="width : 901px;height : 60px;top : 436px;left : 8px; position : absolute; z-index : 3; " id="Layer6">
  <hr size="1">
  <b><input type="text" style="background:white; color:blue;" size="100" disabled="disabled" value="コメント1"></b>
  <br>
</div>

.test {

  height: 250px;

  overflow-y: scroll;

}

@media print {

  .test {

    height: auto;

    overflow-y: initial;

  }

}

試したこと

position : absolute;が悪さをしている可能性があることを以前こちらで見た記憶があったため、削除いたしましたが、「結果」「戻り」ボタンとコメント欄が画面上部にぶっ飛んでしまいました。

補足情報（FW/ツールのバージョンなど）

ブラウザはIE11を使用しております。

Comments

[m.ts10806]

IE以外はどうなのでしょうか。
(とはいえIE対応は今後なくなるものなので、はやいとこ捨てた方が良いかと…)

Answer 1

印刷用CSS(@media print)の設定とデバッグ方法って? HTMLの印刷崩れを解決
印刷用のCSSを設定する

印刷する際別のCSSに切り替える事をオススメします。
そうすれば印刷時に不必要なボタンなども消す事ができます。