I'm injecting HTML into a Word Mergefield (using Aspose) and it seems to work well and renders as I'd expect.
However, it seems to be treated as one table rather than two. Any text or paragraphs inserted between the tables is visible during editing but not when printing. When you print, the tables bunch together as one and anything in between is removed.
Is there anything I can change in the HTML to allow the tables to be independent when rendered in Word and have at least one line break between them? The #variables are replaced with text from the database. Using Office 365 (not the cloud one, the one installed locally)
<table style="border-collapse: collapse; width: 100% ; margin-left: auto; margin-right: auto;" border="0">
<tbody>
<tr>
<td style="width: 100%;">#Statement</td>
</tr>
</tbody>
</table>
<table style="border-collapse: collapse; width: 100% ; margin-left: auto; margin-right: auto;" border="0" >
<tbody>
<tr style="height: 12px; width: 100%">
<td style="width: 50%; height: 12px; text-align: left ; padding: 0px;">#Bank</td>
<td style="width: 15%; height: 12px;"> </td>
<td style="width: 20%; height: 12px; text-align: right ; padding: 0px;">Sort Code:</td>
<td style="width: 15%; height: 12px; text-align: right ; padding: 0px;">#SortCode</td>
</tr>
<tr style="height: 12px">
<td style="width: 50%; height: 12px; text-align: left ; padding: 0px;">#Line1</td>
<td style="width: 15%; height: 12px;"> </td>
<td style="width: 20%; height: 12px; text-align: right ; padding: 0px;">Account No:</td>
<td style="width: 15%; height: 12px ; text-align: right ; padding: 0px;">#AccountNo</td>
</tr>
<tr style="height: 12px">
<td style="width: 50%; height: 12px; text-align: left ; padding: 0px;">#Line2</td>
<td style="width: 15% ; height: 12px;"> </td>
<td style="width: 20% ; height: 12px;"> </td>
<td style="width: 15% ; height: 12px;"> </td>
</tr>
<tr style="height: 12px">
<td style="width: 50%; height: 12px; text-align: left ; padding: 0px;">#Line3</td>
<td style="width: 15%; height: 12px;"> </td>
<td style="width: 20%; height: 12px;"> </td>
<td style="width: 15%; height: 12px;"> </td>
</tr>
<tr style="height: 12px">
<td style="width: 50%; height: 12px; text-align: left ; padding: 0px;">#PostCode</td>
<td style="width: 15%; height: 12px;"> </td>
<td style="width: 20%; height: 12px;"> </td>
<td style="width: 15%; height: 12px;"> </td>
</tr>
</tbody>
</table>
It seems that this is the behavior of MS Word that Microsoft Word merges two or more consecutive Tables into one big Table if there are no Paragraphs in between them. In your HTML, you can simply add an empty paragraph between Tables:
<table style="border-collapse: collapse; width: 100% ; margin-left: auto; margin-right: auto;" border="0">
<tbody>
<tr>
<td style="width: 100%;">#Statement1</td>
</tr>
</tbody>
</table>
<p style="margin-top:0pt; margin-bottom:0pt; font-size:1pt">
<span> </span>
</p>
<table style="border-collapse: collapse; width: 100% ; margin-left: auto; margin-right: auto;" border="0">
<tbody>
<tr style="height: 12px; width: 100%">
<td style="width: 50%; height: 12px; text-align: left ; padding: 0px;">#Bank</td>
<td style="width: 15%; height: 12px;"> </td>
<td style="width: 20%; height: 12px; text-align: right ; padding: 0px;">Sort Code:</td>
<td style="width: 15%; height: 12px; text-align: right ; padding: 0px;">#SortCode</td>
</tr>
<tr style="height: 12px">
<td style="width: 50%; height: 12px; text-align: left ; padding: 0px;">#Line1</td>
<td style="width: 15%; height: 12px;"> </td>
<td style="width: 20%; height: 12px; text-align: right ; padding: 0px;">Account No:</td>
<td style="width: 15%; height: 12px ; text-align: right ; padding: 0px;">#AccountNo</td>
</tr>
<tr style="height: 12px">
<td style="width: 50%; height: 12px; text-align: left ; padding: 0px;">#Line2</td>
<td style="width: 15% ; height: 12px;"> </td>
<td style="width: 20% ; height: 12px;"> </td>
<td style="width: 15% ; height: 12px;"> </td>
</tr>
<tr style="height: 12px">
<td style="width: 50%; height: 12px; text-align: left ; padding: 0px;">#Line3</td>
<td style="width: 15%; height: 12px;"> </td>
<td style="width: 20%; height: 12px;"> </td>
<td style="width: 15%; height: 12px;"> </td>
</tr>
<tr style="height: 12px">
<td style="width: 50%; height: 12px; text-align: left ; padding: 0px;">#PostCode</td>
<td style="width: 15%; height: 12px;"> </td>
<td style="width: 20%; height: 12px;"> </td>
<td style="width: 15%; height: 12px;"> </td>
</tr>
</tbody>
</table>
Hope, this helps. I work with Aspose as Developer Evangelist.
Related
we are tryin to make modify an email for making it work in outlook and media# don't seem to work. im out of idea,
this doesn't seem to work to
here the base model i took for outlook specification with css but it don't seems to work
<!--[if mso]>
<style>
.example-class {
/* Outlook-specific CSS goes here. */
}
</style>
<![endif]-->
soo i tried simple test with changing the background color first with a nice looking red
but it doesn't seem to actually do something. i don't realy know what i can do
<!--[if mso]>
<style>
.table {
background-color : red !important;
}
.body {
background-color : red !important;
}
</style>
<![endif]-->
</head>
<body
class="clean-body"
style="
margin: 0 auto;
padding: 0 auto ;
-webkit-text-size-adjust: 100%;
color-scheme: light only;">
<!--[if IE]><div class="ie-container"><![endif]-->
<!--[if mso]><div class="mso-container"><![endif]-->
<table
background="https://uploads-ssl.webflow.com/612d92faee8b9d13af4cd235/61bdeff1d3a394e5d362a8d2_signaturebackground.png" width="600" height="auto"
style="
max-width: 600px;
border-collapse: collapse;
table-layout: fixed;
border-spacing: 0;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
vertical-align: top;
min-width: 320px;
margin: 0 auto;
background-image: url('https://uploads-ssl.webflow.com/612d92faee8b9d13af4cd235/61bdeff1d3a394e5d362a8d2_signaturebackground.png'); width:600px; display: block;
background-color : rgb(33, 34, 34);
color-scheme: light only;
width: 100%;
color: #ffffff;
font-family: 'Roboto', sans-serif;
top : -50px;
"
cellpadding="0"
cellspacing="0"
>
<tbody>
<tr>
<td style="min-width: 180px; width: 210px; padding-bottom: 37px;">
<table style="margin: 0; padding: 0">
<tbody>
<tr>
<td
style="
padding-left: 42px;
padding-bottom: 1px;
min-width: 83px;
padding-top: 40px;
padding-right: 0px;
"
>
<table>
<tbody>
<tr>
<td style="min-width: 180px">
<div
style="
font-size: 15px;
font-weight: 800;
line-height: 1;
color:rgb(126, 122, 122);filter: brightness(100);
"
>
Inès AZUELOS
</div>
</td>
</tr>
<tr>
<td>
<div
style="
font-size: 13px;
font-weight: 600;
padding-top: 5px;
padding-left: 1px;
color: #3399ff;"
>
Direction - Assistante
</div>
</td>
</tr>
<tr>
<td style="
padding-top: 16px;
padding-left: 2px;
color:rgb(126, 122, 122);filter: brightness(100);
font-size: 13px;
font-weight: 600;"
>
EICIAM
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td
style="
padding-left: 41px;
padding-bottom: 2px;
padding-right: 0px;
padding-top: 15px;
min-width: 83px;
"
>
<table>
<tbody>
<tr>
<td alt="logo facebook" title="logofacebook" style="padding: 3px; width : 20px; height: 20px;">
<img src="" style="width: 20px; height: 20px; display: block;border :0;"/>
</td>
<td alt="logo linkedin" title="logolinkedin" style="padding: 3px; width: 20px; height: 20px;">
<img style="width: 20px; height: 20px; display: block; border :0;"/>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<!-- --------------------- -->
<td style="padding: 33px 0 0 0; width: 226px; margin-left: 5px ">
<table>
<tbody>
<tr>
<td style="border-left: 1px solid #ffffff67; padding: 7px 0 0 19px;">
<table
style="
font-size: 11px;
color: #212222;
letter-spacing: 0.7px;
"
>
<tbody>
<tr>
<td style="min-width: 170px">
<table>
<tbody>
<tr>
<td alt="phone" title="phone" style="min-width: 19px; padding-top: 2px; width: 20px; height: 20px;">
<img src="" style="width: 20px; height: 20px; display: block; border : 0;" />
</td>
<td href=""style="color:rgb(126, 122, 122);filter: brightness(100%); padding-top: 5px; padding-left: 10px; font-size: 12px;"> </td>
</tr>
<tr>
<td alt="mail" title="mail" style="padding-top: 13px; width: 20px; height : 20px;">
<img src="" style="width: 20px; height: 20px; display: block; border : 0;" />
</td>
<td style="padding-top: 16px; padding-left: 10px; font-size: 12px;">
<a href="" style="color:rgb(126, 122, 122);filter: brightness(100);" > </a>
</td>
</tr>
<tr>
<td alt="web" title="web" style="padding-top: 12px; width: 20px; height: 20px;">
<img src="" style="width: 20px; height: 20px; display: block; border: 0;" />
</td>
<td style="padding-top: 16px; padding-left: 10px;font-size: 12px;">
eiciam.fr
</td>
</tr>
<tr>
<td alt="print" title="print" style="padding-top: 15px;width: 20px; height: 20px; display:inline; border:0;">
<img style="width: 20px; height: 20px; display: block; border :0;" onerror="this.src=';"/>
</td>
<td style="padding-top: 16px; padding-left: 10px">
<a style="color:rgb(126, 122, 122);filter: brightness(100); font-size: 9px" style="color: white;"> N'imprimez que si nécessaire </br> Pensez à l'environnement</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td alt="" title="" style="min-width: 50px; width: 100px; height: 100px; border:0;">
<img src="" style="min-height: 50px; min-width: 50px; width: 100px; height: auto; display: block; border: 0;margin-top: 50px;"/>
</td>
<!-- ------------------------------ -->
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if mso]></div><![endif]-->
<!--[if IE]></div><![endif]-->
</body>
The media element is not supported. You can read about supported and unsupported HTML elements, attributes, and cascading style sheets properties in the Word HTML and CSS Rendering Capabilities in Outlook article.
The fact is that Outlook uses Word as an editor and rendering engine for message bodies.
I want to create 2 tables with the opening hours of 2 shops. I would like them to align next to each other in the middle of the page when there is room for it. And otherwise, I want them to center align under each other? For some reason, this really isn't working.
I'm using a Saas solution and I don't have access to the css files so I need to use inline css?
Could someone help me with this?
<div style="width: 100%; padding: 5%; display: flex; justify-content: center;">
<div style="padding: 2%;">
<h3 style="text-align: center;">Rotterdam</h3>
<table style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
<tbody>
<tr style="height: 15px; text-align: left;">
<td style="width: 50%; height: 15px;">Maandag</td>
<td style="width: 50%; height: 15px;">12:00 - 18:00</td>
</tr>
<tr style="height: 15px; text-align: left;">
<td style="width: 50%; height: 15px;">Dinsdag </td>
<td style="width: 50%; height: 15px;">10:00 - 18:00</td>
</tr>
<tr style="height: 15px; text-align: left;">
<td style="width: 50%; height: 15px;">Woensdag </td>
<td style="width: 50%; height: 15px;">10:00 - 18:00</td>
</tr>
<tr style="height: 15px; text-align: left;">
<td style="width: 50%; height: 15px;">Donderdag</td>
<td style="width: 50%; height: 15px;">10:00 - 18:00</td>
</tr>
<tr style="height: 15px; text-align: left;">
<td style="width: 50%; height: 15px;">Vrijdag</td>
<td style="width: 50%; height: 15px;">10:00 - 18:00</td>
</tr>
<tr style="height: 15px; text-align: left;">
<td style="width: 50%; height: 15px;">Zaterdag</td>
<td style="width: 50%; height: 15px;">10:00 - 17:30 </td>
</tr>
<tr style="height: 15px;">
<td style="width: 50%; height: 15px; text-align: left;">Zondag</td>
<td style="width: 50%; height: 15px; text-align: left;">12:00 - 17:30</td>
</tr>
</tbody>
</table>
</div>
<div style="padding: 2%;">
<h3 style="text-align: center;">Capelle a/d IJssel</h3>
<table style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
<tbody>
<tr style="height: 13px; text-align: left; align: center;">
<td style="width: 50%; height: 13px;">Maandag</td>
<td style="width: 50%; height: 13px;">12:00 - 17:30</td>
</tr>
<tr style="height: 15px; text-align: left;">
<td style="width: 50%; height: 15px;">Dinsdag</td>
<td style="width: 50%; height: 15px;">09:30 - 17:30</td>
</tr>
<tr style="height: 15px; text-align: left;">
<td style="width: 50%; height: 15px;">Woensdag</td>
<td style="width: 50%; height: 15px;">09:30 - 17:30</td>
</tr>
<tr style="height: 15px; text-align: left;">
<td style="width: 50%; height: 15px;">Donderdag</td>
<td style="width: 50%; height: 15px;">09:30 - 17:30</td>
</tr>
<tr style="height: 15px; text-align: left;">
<td style="width: 50%; height: 15px;">Vrijdag</td>
<td style="width: 50%; height: 15px;">09:30 - 21:00</td>
</tr>
<tr style="height: 15px; text-align: left;">
<td style="width: 50%; height: 15px;">Zaterdag</td>
<td style="width: 50%; height: 15px;">09:30 - 17:00</td>
</tr>
<tr style="height: 15px;">
<td style="width: 50%; height: 15px; text-align: left;">Zondag</td>
<td style="width: 50%; height: 15px; text-align: left;">Gesloten</td>
</tr>
</tbody>
</table>
</div>
</div>
You just need to add
box-sizing: border-box;
to the main div: this is telling the browser to calculate the children width with the remaining width inside that div.
For the responsiveness you should use media queries to change the alignment
I'm totaly begginer in creating HTML body, but i need to create HTML body of an email, i have to put into that email message Table with some data. It is pretty simple table with 2 rows and 4 columns but, there are 3 cell that have to be splite. So i've created table (1 row 2 columns) inside that cell. And here is the problem, while filling those new cell, there "main" cell is not filled correctly, please see below.
an example
How to fill that correctly. I would be grateful for a code that fill it.
My html body:
<table style="text-align: center; padding: 8px; width: 600px;" border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="width: 150px; text-align: center;">Done</td>
<td style="width: 150px; text-align: center;">Success</td>
<td style="width: 150px; text-align: center;">Overwrited</td>
<td style="width: 150px; text-align: center;">Unrecognized</td>
</tr>
<tr>
<td style="font-size: 24px; font-weight: bold;">{1}</td>
<td>
<table style="height: 50px; width: 150px; text-align: center;" >
<tbody>
<tr>
<td style="height: 50px; width: 75px; border-right:solid 1px; font-size: 24px; font-weight: bold;" bgcolor="#00cc00">{2}</td>
<td style="height: 50px; width: 75px; font-size: 24px; font-weight: bold;" bgcolor="#00cc00">{3}%</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 150px; ">
<table style="height: 50px; width: 150px; text-align: center;">
<tbody>
<tr>
<td style="height: 50px; width: 75px; border-right:solid 1px; font-size: 24px; font-weight: bold;" bgcolor="#ee4c50">{4}</td>
<td style="height: 50px; width: 75px; font-size: 24px; font-weight: bold;" bgcolor="#ee4c50">{5}%</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 150px;">
<table style="height: 50px; width: 150px; text-align: center;">
<tbody>
<tr>
<td style="height: 50px; width: 75px; border-right:solid 1px; font-size: 24px; font-weight: bold;" bgcolor="#99ccff">{6}</td>
<td style="height: 50px; width: 75px; font-size: 24px; font-weight: bold;" bgcolor="#99ccff">{7}%</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
And i would like to get something like that:
example
All of your <table> needs to be
<table cellspacing="0" cellpadding="0" border="0">
this will remove the extra white padding in<td>
<table cellpadding="0" cellspacing="0" border="0" style="text-align: center; padding: 8px; width: 600px;" border="1"
cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="width: 150px; text-align: center;">Done</td>
<td style="width: 150px; text-align: center;">Success</td>
<td style="width: 150px; text-align: center;">Overwrited</td>
<td style="width: 150px; text-align: center;">Unrecognized</td>
</tr>
<tr>
<td style="font-size: 24px; font-weight: bold;">{1}</td>
<td>
<table cellpadding="0" cellspacing="0" border="0" style="height: 50px; width: 150px; text-align: center;">
<tbody>
<tr>
<td style="height: 50px; width: 75px; border-right:solid 1px; font-size: 24px; font-weight: bold;"
bgcolor="#00cc00">{2}</td>
<td style="height: 50px; width: 75px; font-size: 24px; font-weight: bold;" bgcolor="#00cc00">{3}%</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 150px; ">
<table cellpadding="0" cellspacing="0" border="0" style="height: 50px; width: 150px; text-align: center;">
<tbody>
<tr>
<td style="height: 50px; width: 75px; border-right:solid 1px; font-size: 24px; font-weight: bold;"
bgcolor="#ee4c50">{4}</td>
<td style="height: 50px; width: 75px; font-size: 24px; font-weight: bold;" bgcolor="#ee4c50">{5}%</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 150px;">
<table cellpadding="0" cellspacing="0" border="0" style="height: 50px; width: 150px; text-align: center;">
<tbody>
<tr>
<td style="height: 50px; width: 75px; border-right:solid 1px; font-size: 24px; font-weight: bold;"
bgcolor="#99ccff">{6}</td>
<td style="height: 50px; width: 75px; font-size: 24px; font-weight: bold;" bgcolor="#99ccff">{7}%</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
I´m sure this is the most stupid question for HTML developers. But I´m not one of them.
I have the following table and I need to get the three rounded images inside the table to be a circle and not like they are showing. I cannot get them to be rounded even if I have set width to be on 50px. The divs are like 'filling' the table row. I´m sure that what I ´m trying to do is pretty easy. Can someone help me?:
This is the HTML Code:
<div style="align-items:center; text-align: center; width:300px; height:200px; margin:0 auto">
<table border="1">
<tbody><tr style="height: 200px">
<td style="height: 200px; width: 300px;" colspan="3" align="center" valign="middle">
<div style="background-color: red; width: 150px; height: 150px; border-radius: 25px; border-bottom-left-radius:50%; border-bottom-right-radius:50%; border-top-left-radius:50%; border-top-right-radius:50%;">
</div></td>
</tr>
<tr>
<td colspan="3">
<h3 class="col-md-12 text-center" style="align-items: center">
Cantidad de Gente: <strong>Poca</strong>
</h3>
</td>
</tr>
<tr style="height: 50px; padding-top: 10px;">
<td style="height: 50px; width: 50px;">
<div style="background-color: green; width: 100%; height: 100%; border-radius: 25px; border-bottom-left-radius:50%; border-bottom-right-radius:50%; border-top-left-radius:50%; border-top-right-radius:50%;">
</div></td>
<td style="height: 50px; width: 50px;">
<div style="background-color: yellow; width: 100%; height: 100%; border-radius: 25px; border-bottom-left-radius:50%; border-bottom-right-radius:50%; border-top-left-radius:50%; border-top-right-radius:50%;">
</div></td>
<td style="height: 50px; width: 50px;">
<div style="background-color: red; width: 100%; height: 100%; border-radius: 25px; border-bottom-left-radius:50%; border-bottom-right-radius:50%; border-top-left-radius:50%; border-top-right-radius:50%; ">
</div></td>
</tr>
<tr>
<td>
Poco
</td>
<td>
Mediana
</td>
<td>
Mucho
</td>
</tr>
</tbody></table>
</div>
If you put the 50px height and 50px width on the circle itself instead of it's container you will get a perfect circle. I also added margin:0 auto to center them but you may not need this.
<div style="align-items:center; text-align: center; width:300px; height:200px; margin:0 auto">
<table border="1">
<tbody><tr style="height: 200px">
<td style="height: 200px; width: 300px;" colspan="3" align="center" valign="middle">
<div style="background-color: red; width: 150px; height: 150px; border-radius: 25px; border-bottom-left-radius:50%; border-bottom-right-radius:50%; border-top-left-radius:50%; border-top-right-radius:50%;">
</div></td>
</tr>
<tr>
<td colspan="3">
<h3 class="col-md-12 text-center" style="align-items: center">
Cantidad de Gente: <strong>Poca</strong>
</h3>
</td>
</tr>
<tr style="height: 50px; padding-top: 10px;">
<td style="height: 50px; width: 50px;">
<div style="background-color: green; width: 50px; height: 50px; border-radius: 50%;margin:0 auto;">
</div></td>
<td style="height: 50px; width: 50px;">
<div style="background-color: yellow; width: 50px; height: 50px; border-radius: 50%;margin:0 auto;">
</div></td>
<td style="height: 50px; width: 50px;">
<div style="background-color: red; width: 50px; height:50px; border-radius: 50%; margin:0 auto;">
</div></td>
</tr>
<tr>
<td>
Poco
</td>
<td>
Mediana
</td>
<td>
Mucho
</td>
</tr>
</tbody></table>
</div>
The table you created has width 300px, whereas the row with three circle you are defining has width 50px each i.e. 150px total. And since the table row element suppose to fill the table width, it is stretching your row to 300px. You need to increase the width and height of row td element to 100px to make cover the whole row or if you want the circle strictly 25px radius then you can add padding to your td element.
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>