JSFiddle - React, Tailwind, and code Playground

by black strings

HTML

<div id="buttons"></div>
<div id="con"></div>
<div id="printArea"></div>
<table id="myTable">
  <tr>
    <td><img class="test" src="https://external-designit.qa.menards.com/designit/DEWGarage/Textures/Roof/Asphalt/Atlas/Stormmaster/1516650-512x256-29.60inx39.jpg">
    <p>Endwall B</p>
    </td>
    <td><img src="https://external-designit.qa.menards.com/designit/DEWGarage/Textures/Roof/Asphalt/Atlas/Stormmaster/1516650-512x256-29.60inx39.jpg">
    <p>Sidewall D</p>
    </td>
  </tr>
  
   <tr>
    <td><img src="https://external-designit.qa.menards.com/designit/DEWGarage/Textures/Roof/Asphalt/Atlas/Stormmaster/1516650-512x256-29.60inx39.jpg">
    <p>Sidewall C</p>
    </td>
    <td><img src="https://external-designit.qa.menards.com/designit/DEWGarage/Textures/Roof/Asphalt/Atlas/Stormmaster/1516650-512x256-29.60inx39.jpg">
    <p>Endwall A</p>
    </td>
  </tr>
</table>

CSS

#buttons {margin-bottom:10px; border:thin solid grey; padding:5px;}

#myTable img.test {
  width:200px;
  height:200px;
  border:thin solid red;
}
#myTable{width:100%;}

#printView {width:100%}
//.custBody{width:100%;}

JavaScript

//browser print test 1

//grab the table element
var $table = $('#myTable');

//create the iframe in order to target it
var $iframe = $('<iframe id="printView">');
//append iframe
$('#con').append($iframe);

//get the document of iframe
var doc = $('#printView').get(0).contentWindow.document;
var printBody = $('body', doc);
printBody.addClass("custBody");
//put table on document of iframe
printBody.append($table); 

//print button
var $btn = $('<button>Print</button>')
	.on('click', function(){
  	//focus the doument and print on it
    $('#printView').get(0).contentWindow.focus();
    $('#printView').get(0).contentWindow.print();   
  });

$('#buttons').append($btn);