How can I handle overflow data in Html table? - html

Question

I generated following PDF report data formation by HTML using Rotativa.
But when I tested with large data, above the header report is getting cut.
So how can I handle large data in HTML without page margins not affected.
I have used pure <table><tr><td></td></tr></table> structure to design. And to prevent data to overflow, I have set all my tables with style table-layout:fixed and word-wrap: break-word.
normal report view:
altered report view:
following is my html page for the header
Does anyone help me?
<div id="header" style="font-family: Calibri; padding-top: 25px;">
<div style="float: right; font-family: Calibri; padding-right: 15px; font-size: 11px; margin-bottom: 2px;">
Page <span class="page"></span> of <span class="topage"></span>
</div>
<script type="text/javascript">
(function () {
var vars = {};
var x = document.location.search.substring(1).split('&');
for (var i in x) {
var z = x[i].split('=', 2); vars[z[0]] = unescape(z[1]);
}
var p = ['page', 'topage', 'frompage', 'webpage', 'section', 'subsection', 'subsubsection'];
for (var i in p) {
var y = document.getElementsByClassName(p[i]);
for (var j = 0; j < y.length; j++)
y[j].textContent = vars[p[i]];
}
})();
</script>
<table id-="reportHedear" style="width: 100%; table-layout: fixed; border: 1px solid lightgrey; font-family: Calibri; top: 10px">
<tr style="width: 100%">
<td style="width: 1%" valign="top"></td>
<td style="width: 75%" valign="top">
<table style="width: 100%; margin: 0px; table-layout: fixed;">
<tr style="width: 100%">
<td id="logo" style="width: 25%; margin-top: 10px">
<img src="#Model.CompanyLogo" alt="" style="max-height: 50px; max-width: 220px" />
</td>
<td style="width: 3%"></td>
<td id="companyHeader" style="width: 72%" valign="top">
#if (#Model.CompanyMainTag != null && #Model.CompanyTag1 != null && #Model.CompanyISOTag != null)
{
<table style="table-layout:fixed; word-wrap:break-word; width:100%; border-top: 5px solid; border-bottom: 5px solid;">
<tr id="mainTag" style="width:100%">
<td style="width:100%; text-align: center; font-size:15px">#Model.CompanyMainTag</td>
</tr>
<tr id="tag1" style="width:100%">
<td style="width:100%; text-align: center; font-size:13px">#Model.CompanyTag1</td>
</tr>
<tr id="companyISO" style="width:100%">
<td style="width:100%; text-align: center; font-size:15px">#Model.CompanyISOTag</td>
</tr>
</table>
}
</td>
</tr>
<tr style="width:100%;">
<td colspan="3" style="width:100%; ">
<table style="width:100%; font-size: 12px; table-layout: fixed">
<tr style="width:100%">
<td id="addressInfo" style="width: 30%" valign="top">
<table style="width: 100%; table-layout: fixed; word-wrap: break-word">
<tr style="width: 100%">
<td style="width: 45%; text-align: right; font-weight: bold" valign="top"><span>Address: </span></td>
<td style="width: 55%;"><label>#Model.ComapnyAddress</label></td>
</tr>
<tr><td colspan="2"></td></tr>
<tr style="width: 100%">
<td style="width: 45%; text-align: right; font-weight: bold" valign="top"><span>Phone: </span></td>
<td style="width: 55%"><span>#Model.ComapnyPhone</span></td>
</tr>
#if (Model.IsEnableProgramManager)
{
<tr><td colspan="2"></td></tr>
<tr style="width: 100%">
<td style="width: 45%; text-align:right; font-weight: bold" valign="top"><span>Program Manager: </span></td>
<td style="width: 55%"><span>#Model.ProgramManager</span></td>
</tr>
}
</table>
</td>
<td id="companyDetail" style="width: 35%" valign="top">
<table style="width: 100%; table-layout: fixed; word-wrap: break-word">
<tr style="width: 100%">
<th style="width: 30%; text-align: right;" valign="top"><span>#Model.CustomerLabel: </span></th>
<td style="width: 70%; font-weight: bold"><span>#Model.CompanyName</span></td>
</tr>
<tr><td colspan="2"></td></tr>
<tr style="width: 100%">
<th style="width: 30%; text-align: right" valign="top"><span>Address: </span></th>
<td style="width: 70%;"><label>#Model.Address</label></td>
</tr>
<tr><td colspan="2"></td></tr>
<tr style="width: 100%">
<th style="width: 30%; text-align: right" valign="top"><span>Web: </span></th>
<td style="width: 70%"><span>#Model.Website</span></td>
</tr>
</table>
</td>
<td id="comapnyDetails1" style="width: 35%" valign="top">
<table style="width: 100%; table-layout: fixed; word-wrap: break-word">
<tr style="width: 100%;">
<th style="width: 30%; text-align: right;" valign="top"><span>Attn: </span></th>
<td style="width: 70%; "><span>#Model.ContactPersonName</span></td>
</tr>
<tr><td colspan="2"></td></tr>
<tr style="width: 100%">
<th style="width: 30%; text-align: right" valign="top"><span>Email: </span></th>
<td style="width: 70%;"><span>#Model.EmailID</span></td>
</tr>
<tr><td colspan="2"></td></tr>
<tr style="width: 100%">
<th style="width: 30%; text-align: right" valign="top"><span>Phone: </span></th>
<td style="width: 70%"><span>#Model.ContactNo</span></td>
</tr>
<tr><td colspan="2"></td></tr>
<tr style="width: 100%">
<th style="width: 30%; text-align: right" valign="top"><span>Fax: </span></th>
<td style="width: 70%"><span>#Model.Fax</span></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td style="width: 2%" valign="top"></td>
<td style="width: 21%" valign="top">
<table style="width: 100%; table-layout: fixed" align="center">
<tr style="width: 100%">
<td style="width: 100%" align="center">
<span style="margin-bottom: 1px; font-weight: bold; font-size: 24px">#Model.AssemblyQuotationHeader</span>
<table id="QuoteDetails" style="max-width: 100%; table-layout: fixed; margin-top: 1px; margin-left: 10px; font-weight: bold; text-align: center; border: black; border: 1px solid black; border-collapse:collapse">
<tr style="width: 100%">
<td style="max-width: 45%; font-size: 15px; padding-left: 7px; padding-right: 7px; padding-top:3px; padding-bottom: 3px; background-color: lightgray; border:1px solid black; border-collapse:collapse">RFQ ID</td>
<td style="max-width: 55%; font-size: 15px; padding-left: 10px; padding-right: 10px; padding-top:3px; padding-bottom: 3px; border:1px solid black; border-collapse:collapse">#Model.QuoteID</td>
</tr>
<tr style="width: 100%">
<td style="max-width: 45%; font-size: 15px; padding-left: 7px; padding-right: 7px; padding-top:3px; padding-bottom: 3px; background-color: lightgray; border:1px solid black; border-collapse:collapse">Assembly Id</td>
<td style="max-width: 55%; font-size: 15px; padding-left: 10px; padding-right: 10px; padding-top:3px; padding-bottom: 3px; border:1px solid black; border-collapse:collapse">#Model.AssemblyIDWithVersion</td>
</tr>
<tr style="width: 100%">
<td style="max-width: 45%; font-size: 15px; padding-left: 7px; padding-right: 7px; padding-top:3px; padding-bottom: 3px; background-color: lightgray; border:1px solid black; border-collapse:collapse">Date</td>
<td style="max-width: 55%; font-size: 15px; padding-left: 10px; padding-right: 10px; padding-top:3px; padding-bottom: 3px; border:1px solid black; border-collapse:collapse">#Model.QuoteDate</td>
</tr>
#if (Model.IsEnableQuoteExpirationDate)
{
<tr style="width: 100%">
<td style="max-width: 45%; font-size: 15px; padding-left: 7px; padding-right: 7px; padding-top:3px; padding-bottom: 3px; background-color: lightgray; border:1px solid black; border-collapse:collapse">Expires</td>
<td style="max-width: 55%; font-size: 15px; padding-left: 10px; padding-right: 10px; padding-top:3px; padding-bottom: 3px; border:1px solid black; border-collapse:collapse">#Model.ExpireDate</td>
</tr>
}
</table>
</td>
</tr>
<tr style="width: 100%">
<td style="width: 100%; font-size: 11px; text-align: center;">
<p>#Model.AssemblyQuotationMsg</p>
</td>
<td style="width: 1%"></td>
</tr>
</table>
</td>
</tr>
</table>
</div>