JSFiddle - React, Tailwind, and code Playground

by Derk-Jan Hartman

HTML

<table class="wikitable">
<tbody><tr>
<th>Image</th>
<th>First issued</th>
<th>Design</th>
<th>Slogan</th>
<th>Serial format</th>
<th>Serials issued</th>
<th>Notes</th>
</tr>
<tr>
<td><a href="/wiki/File:LicensePlateOntario1950.jpg" class="image view-border-box"><img alt="LicensePlateOntario1950.jpg" src="//upload.wikimedia.org/wikipedia/en/thumb/7/7a/LicensePlateOntario1950.jpg/150px-LicensePlateOntario1950.jpg" width="150" height="80" srcset="//upload.wikimedia.org/wikipedia/en/thumb/7/7a/LicensePlateOntario1950.jpg/225px-LicensePlateOntario1950.jpg 1.5x, //upload.wikimedia.org/wikipedia/en/7/7a/LicensePlateOntario1950.jpg 2x" data-file-width="250" data-file-height="134"></a></td>
<td>1949</td>
<td>white on black</td>
<td>1950</td>
<td>12<small>A</small>34</td>
<td></td>
<td></td>
</tr>
<tr>
<td><a href="/wiki/File:1966_ONTARIO_LICENSE_PLATE_-_Flickr_-_woody1778a.jpg" class="image view-border-box"><img alt="1966 ONTARIO LICENSE PLATE - Flickr - woody1778a.jpg" src="//upload.wikimedia.org/wikipedia/commons/thumb/c/c5/1966_ONTARIO_LICENSE_PLATE_-_Flickr_-_woody1778a.jpg/150px-1966_ONTARIO_LICENSE_PLATE_-_Flickr_-_woody1778a.jpg" width="150" height="78" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/c/c5/1966_ONTARIO_LICENSE_PLATE_-_Flickr_-_woody1778a.jpg/225px-1966_ONTARIO_LICENSE_PLATE_-_Flickr_-_woody1778a.jpg 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/c/c5/1966_ONTARIO_LICENSE_PLATE_-_Flickr_-_woody1778a.jpg/300px-1966_ONTARIO_LICENSE_PLATE_-_Flickr_-_woody1778a.jpg 2x" data-file-width="1483" data-file-height="771"></a></td>
<td>1966</td>
<td>blue on white with embossed crown separator</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a href="/wiki/File:Blank_License_Plate_Shape.jpg" class="image view-border-box"><img alt="Blank License Plate Shape.jpg" src="//upload.wikimedia.org/wikipedia/commons/thumb/4/4b/Blank_License_Plate_Shape.jpg/150px-Blank_License_Plate_Shape.jpg" width="150" height="75"...

JavaScript

$( function() {
var table = document.getElementsByTagName( 'table' )[0];
var iframe = document.createElement('iframe');
var div = document.createElement('div').appendChild( table );
var html = '<html><head><style>html, body { height: 100%; }</style></head><body>' + $(div).html() + '</body></html>';
iframe.frameBorder = 0;
iframe.setAttribute( 'sandbox', "allow-forms allow-popups allow-scripts allow-same-origin allow-modals" );
iframe.setAttribute( 'style', "display: block; width: 100%; height: 100%;" );
iframe.src = 'data:text/html;charset=utf-8,' + encodeURIComponent(html);
console.log( encodeURI( html ));
//$(table).detach();

$(document.body).after( $(iframe) );
//var iframedoc = iframe.contentDocument || iframe.contentWindow.document;
//iframedoc.body.setAttribute( 'style', 'width: 100%;height:100%;')
//iframedoc.body.innerHTML = '<html><body>' + $(div).html() + '</body></html>';
//iframe.contentWindow.document.open();
//iframe.contentWindow.document.write(html);
//iframe.contentWindow.document.close();
} );