JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdn.rawgit.com/noelboss/featherlight/1.2.3/release/featherlight.min.js"></script>
<form>
<input type="button" value="Print this page" onClick="javascript:printDiv('printableArea');">
</form>
<div id="printableArea">
<div class="container">
<div class="row">
<div class="span5">
<img src="Demo/images/directcommercials(1).jpg" alt="Direct Commercial Vans Logo">
<br> <address style="font-style: normal;">
<strong>Direct Commercial Vans</strong> <br>
52 Uppermoor Road, Allenton, Derbyshire, DE24 9BY.
</address>
</div>
<div class="span4 well">
<table class="invoice-head">
<tbody>
<tr>
<td class="pull-right"><strong>VAT #:</strong>
</td>
<td>21398324797234</td>
</tr>
<tr>
<td class="pull-right"><strong>Invoice #:</strong>
</td>
<td>
<?php echo $invNo; ?>
</td>
</tr>
<tr>
<td class="pull-right"><strong>Date:</strong>
</td>
<td>
<?php echo $dateCreated->format('d/m/Y'); ?></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="span8">
<h2>Deliver To:</h2>
<address style="font-style: normal; font-size: 14px;">
<b><?php echo $cusFullName; ?></b><br>
<?php echo $cus_add; ?><br>
<?php echo...
CSS
[class*="span"] {
float: left;
min-height: 1px;
margin-left: 20px;
}
table {
max-width: 100%;
background-color: transparent;
border-collapse: collapse;
border-spacing: 0;
}
.table {
width: 100%;
margin-bottom: 20px;
}
.table th, .table td {
padding: 8px;
line-height: 20px;
text-align: left;
vertical-align: top;
border-top: 1px solid #dddddd;
}
.table th {
font-weight: bold;
}
.table thead th {
vertical-align: bottom;
}
.table-bordered {
border: 1px solid #dddddd;
border-collapse: separate;
*border-collapse: collapse;
border-left: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.table-bordered th, .table-bordered td {
border-left: 1px solid #dddddd;
}
.table-bordered thead:first-child tr:first-child th {
border-top: 0;
}
.pull-right {
float: right;
}
.row {
margin-left: -20px;
*zoom: 1;
}
.row:before, .row:after {
display: table;
line-height: 0;
content:"";
}
.row:after {
clear: both;
}
.span12 {
width: 940px;
}
.span11 {
width: 860px;
}
.span10 {
width: 780px;
}
.span9 {
width: 700px;
}
.span8 {
width: 620px;
margin-left: 50px;
}
.span7 {
width: 540px;
}
.span6 {
width: 460px;
}
.span5 {
width: 380px;
}
.span4 {
width: 300px;
}
.span3 {
width: 220px;
}
.span2 {
width: 140px;
}
.span1 {
width: 60px;
}
.well {
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
.container {
margin-right: auto;
margin-left: auto;
width: 750px;
}
.container:before, .container:after {
display: table;
line-height: 0;
...
JavaScript
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}