JSFiddle - React, Tailwind, and code Playground

by black strings

HTML

<div id="buttons"></div>
<div id="con"></div>
<div id="printArea"></div>
<div>
<div>
<img src="https://external-designit.qa.menards.com/designit/DEWGarage/Textures/Roof/Asphalt/Atlas/Stormmaster/1516650-512x256-29.60inx39.jpg" class="wallImg testImg">
</div>
</div>
</div>
<table id="wallTable">
	
	  <tbody><tr>
	    <td id="TopLeftQuad">
			<img src="https://external-designit.qa.menards.com/designit/DEWGarage/Textures/Roof/Asphalt/Atlas/Stormmaster/1516650-512x256-29.60inx39.jpg" class="wallImg">
			<div>
				<h3 class="wallLabel">Endwall B</h3>
				<ul></ul>
			</div>
	    </td>
	    <td>
			<img src="https://external-designit.qa.menards.com/designit/DEWGarage/Textures/Roof/Asphalt/Atlas/Stormmaster/1516650-512x256-29.60inx39.jpg" class="wallImg">
			<div>
				<h3 class="wallLabel">Sidewall D</h3>
				<ul></ul>
			</div>
	    </td>
	  </tr>
	  
	  <tr>
	    <td>
			<img src="https://external-designit.qa.menards.com/designit/DEWGarage/Textures/Roof/Asphalt/Atlas/Stormmaster/1516650-512x256-29.60inx39.jpg" class="wallImg">
			<div>
				<h3 class="wallLabel">Sidewall C</h3>
				<ul></ul>
			</div>
	    </td>
	    <td id="BottomRightQuad">
			<img src="https://external-designit.qa.menards.com/designit/DEWGarage/Textures/Roof/Asphalt/Atlas/Stormmaster/1516650-512x256-29.60inx39.jpg" class="wallImg">
			<div>
				<h3 class="wallLabel">Endwall A</h3>
				<ul></ul>
			</div>
	    </td>
	  </tr>
	  
	</tbody></table>

CSS

#buttons {margin-bottom:10px; border:thin solid grey; padding:5px;}
#printView {width:100%; height:300px;}
.custBody {width:100%;}

#wallTable {width:100%; border-collapse: collapse; margin-top:10px}
#wallTable td {text-align:center; padding:5px; width:350px;}
#wallTable img.wallImg { width:200px; height:200px;}
.wallImg {width:200px;height:200px;}
.testImg {width:200px; height:200px;}
#wallTable h3 {text-align:center; margin-top:0; text-transform:uppercase;}
#wallTable div {text-align:left;}
#wallTable div ul li {list-type:none; list-style-type:none; font-size:10px;}
	
#TopLeftQuad {border-right:1px solid #999999;border-bottom: 1px solid #999999;}
#BottomRightQuad {border-left: 1px solid #999999;border-top: 1px solid #999999;}

JavaScript

var s="browser print test 2 - IFrame"

//keep in mind an iframe needs it's own css

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

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

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

//create your own style css - Not in use
//var $link = $("<style>");
//$link.append('#wallTabl img {border: thin solid //red;}');

//transfer the css to the inner print iframe
printHead.append($('style').clone());

//$('#printArea').append($table);

function moveTable(){
	var def = $.Deferred();
	//relocate the table to iframe's document
	$.when(printBody.append($table)).then(function(){
  	def.resolve();
  });
  
  
  return def.promise();
}

//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);

$.when(moveTable()).then(function(){
  //all element in the iframe with css just needs their css modify to trigger off safari to update their css or sync with their css
  
  //trick is to add a dummyClass and remove dummyClass on all elements
  
  //iterate through all dom elements and hack css add/remove
  $('*', printBody).each(function(){
  	var me = $(this);
  	if(me.attr('class')){
  		me.addClass("safariCssHack");
    	me.removeClass("safariCssHack");
    }
  });
  
  /*//remove and add back class
  var $imgs = $('img', printBody);
  var classVal = $imgs.attr('class');
 // $imgs.removeClass(classVal);
  $imgs.addClass(classVal + " wall3");
  */
  
});