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
Related
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.
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>
I have a gwt website and if I use the zoom function of my browser the content is displayed behind the menu. So no one can read the tables.
the used layout code looks like this:
<div id="globalContent" style="width: 100%;">
<table class="" cellspacing="0" cellpadding="0" style="width: 100%; height: 100%;">
<tbody>
<tr>
<td align="left" colspan="2" style="vertical-align: middle;">
<div id="headerContent"> </div>
</td>
</tr>
<tr>
<td align="left" style="vertical-align: top; width: 270px">
<div id="navigationContent" class="" style="float: left">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" style="vertical-align: top;">
<table class="navigationPanel" cellspacing="0" cellpadding="0" style="height: 100%;" aria-hidden="false"> /*menu goes here*/
</table>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<td style="vertical-align: middle;">
<div id="mainContent" style="float: left; width: 100%">
<table class="bodyPanel" cellspacing="0" cellpadding="0" style="height: 775px;"> /* Content goes here /* </table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
Edit: Css
#globalContent {
background-color: #F1F1F1;
}
.bodyPanel {
width: 100%;
height: 100%;
background-color: #F1F1F1;
margin-top: 70px;
position: absolute;
}
.navigationPanel { /*border: 2px Black;*/
width: 260px;
max-width: 260px;
height: 100%;
min-height: 800px;
background-color: #F1F1F1;
margin-right: 10px;
position: fixed;
z-index: 1;
margin-top: 70px;
}
When "navigationPanel" has position: fixed and mainContent has position: absolute.
The Content appears right of the menu but it ist 270px to width.
I have to support IE8 so I can't use CSS3 :-(