The image shows what it will look like when I print one of the Iframes I have, my problem is how can I join the other three Iframes (there almost same in height and width, actually look like this too) and I want to fill this whole print page with those three other Iframes content. Btw I use this Iframe cause I want to get the content from other page, and use the button in my main page to print or generate report with those.

Here's the Iframes

<iframe src="temperature(1).php" scrolling="no" style="border: 0px none; margin-left: -1000px;  height:200px; visibility:none; margin-top:-700px; width: 1000px;" name="temp" id="temp"></iframe>
<iframe src="turbidity(1).php" scrolling="no" style="border: 0px none; margin-left: -1000px;  height:200px; visibility:none; margin-top: -1000px; width: 1000px;" name="ntu"></iframe>
<iframe src="water-level(1).php" scrolling="no" style="border: 0px none; margin-left: -1000px;  height:200px; visibility:none; margin-top: -1000px; width: 1000px;" name="waterlevel"></iframe>
<iframe src="pH(1).php" scrolling="no" style="border: 0px none; margin-left: -1000px;  height:200px; visibility:none; margin-top: -1000px; width: 1000px;" name="pH"></iframe>

And the button I use to print, but this thing can only print 1 of those four frames, I don't know how can I join the four and print them in one page with some approach out there... which is what I want to happen...

<button class="btn btn-primary btn-sm ml-5 float-right mr-4" onclick="frames['waterlevel'].print()">Generate Report</button>