一部スクロール表示が含まれる画面を印刷する方法

質問

ホームページ画面の一部に縦スクロールの設定をしております。
画面上に印刷ボタンを作成し、プリントアウトしたいと考えておりますが、ファイル→印刷と押すと表示された部分のみしか印刷されません。
どなたかご存じでしたらご教示願います。

【HTML】
<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>

【CSS】
.test {

height: 250px;

overflow-y: scroll;

}

回答No.1

sutorama

「Microsoft Print to PDF」という、Windows10 標準装備された「仮想プリンター」があるので、印刷で「Microsoft Print to PDF」を選択してから、一度画面をPDFにしてから、そのPDFをプリントアウトしましょう

https://windowsfaq.net/settings/how-to-print-pdf/

https://jp.drvhub.net/devices/printers/microsoft/print-to-pdf

補足

出力結果は同じでした。