Bootstrap 3 Template
This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.
HTML
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<table class="print-table table-bordered">
<thead>
<tr>
<th class="first" rowspan="2">Heading</th>
<th colspan="2">Heading</th>
<th colspan="4">Heading</th>
</tr>
<tr>
<th class="text-center">Subhead</th>
<th>Subhead</th>
<th>Subhead</th>
<th>Subhead</th>
<th>Subhead</th>
<th>Subhead</th>
</tr>
</thead>
<tbody>
<tr class="contents-row">
<td>
<table class="print-sub-table">
<tr>
<td class="no-wrap">
<i class="fa fa-star"></i> 4.3
<i class="fa fa-check-circle"></i>
<span>amet, consectetur</span> |
<span><i>amet, consectetur</i></span> |
<span><i>amet, consectetur</i></span>
</td>
</tr>
<tr>
...
CSS
/* THE ISSUES */
table tr {
-webkit-column-break-inside: avoid !important;
page-break-inside: avoid !important;
break-inside: avoid !important;
display: table; /* Here*/
}
table thead tr {
display: table-row; /* Here*/
}
body {
margin: 0 !important;
color: black;
}
html, body { padding: 0, margin: 0;}
img {
border: 0;
}
p {
font-size: 6pt;
}
@page {
size: auto;
margin: 0mm;
}
.print-table td,
.print-table th {
vertical-align: top;
padding: 3px;
}
.print-table th {
text-align: center;
}
.print-table th.first {
vertical-align: middle;
text-align: left;
}
.print-table {
display: block !important;
font-size: 6pt !important;
}
.print-sub-table td,
.print-sub-table th {
border-collapse: collapse !important;
border: none !important;
outline:none !important;
font-size: 6pt !important;
padding: 0;
}
.no-wrap {
white-space: nowrap;
}
@media print {
table tr {
-webkit-column-break-inside: avoid !important;
page-break-inside: avoid !important;
break-inside: avoid !important;
display: table;
}
/* Override the above to fix the table header layout */
table thead tr {
display: table-row;
}
body {
margin: 0 !important;
color: black;
}
html, body { padding: 0, margin: 0;}
img {
border: 0;
}
p {
font-size: 6pt;
}
@page {
size: auto;
margin: 0mm;
}
.print-table td,
.print-table th {
vertical-align: top;
padding: 3px;
}
.print-table th {
text-align: center;
}
.print-table {
display: block !important;
font-size: 6pt !important;
}
.print-sub-table td,
.print-sub-table th {
border-collapse:...