I am new to Visualforce and i want to make a page to represent a contract (render as PDF). I am trying to make 2 tables display side by side. I tried a lot of things with CSS but could not find solution. When not rendering as PDF, the tables are displayed side by side. However, when rendering as PDF, tables go the one under the other. Could anyone shed some lights on this?
I want the table with "Customer Data" and "Product Selection" to be side by side.
My code is here: Could anyone suggest what i am doing wrong? Thx!
<!-- 16/12/2020 @ggalaios: Sample Application form used for Document Generation -->
<apex:page docType="html-5.0" renderAs="pdf" standardController="csclm__Agreement__c" extensions="csclmcb.ClausesController,customAgreementController" standardStylesheets="false"
sidebar="false" showHeader="false" applyHtmlTag="false" applyBodyTag="false">
<head>
<!-- Stylesheets -->
<apex:stylesheet value="{!URLFOR($Resource.csclmcb__slds, '/assets/styles/salesforce-lightning-design-system-vf.css')}" />
<apex:stylesheet value="{!$Resource.csclmcb__PDFDocumentStyle}" />
<apex:stylesheet value="{!URLFOR($Resource.csclmcb__PDFstyle, 'PDFstyle.css')}" />
<style type="text/css">
@page {
size: A4;
margin: 25mm;
padding-top: 14mm;
}
body { font-family: Arial Unicode MS; }
font { font-family: Arial Unicode MS !important; }
.inlineTable {
display: inline-block;
}
</style>
<!-- First Page Header -->
<!-- Logo Center -->
<csclmcb:PDFHeaderFooter type="header" position="center">
<apex:outputPanel layout="block" rendered="{!!themeUseCoverPage}" style="border-bottom: 1px solid #ccc; color: {!themeColour};">
<apex:outputPanel layout="none" rendered="{!!themeUseLetterhead}">
<img style="height: 30mm; width: auto;" class="logo" src="/{!themeCompanyLogo}" />
</apex:outputPanel>
</apex:outputPanel>
</csclmcb:PDFHeaderFooter>
</head>
<body style="margin: 20px 0 0 0;">
<div style="font-family: Arial Unicode MS;font-weight: 900; ">
<br/>
<br/>
<!-- Start Apex form -->
<apex:form >
<!-- summary part -->
<apex:outputPanel layout="none" rendered="{!!themeUseCoverPage}">
<table style="{'border-top: 1px solid #ccc;'}" width="100%">
</table>
</apex:outputPanel>
</apex:form>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<!-- All Pages Footer -->
<csclmcb:PDFHeaderFooter type="footer" position="center">
<div style="border-top: 1px solid #ccc; color: {!lettersColour};">
<br/>{!themeCompanyStreet}, {!themeCompanyPostalCode}, {!themeCompanyCity} - Τηλ.: {!themeCompanyPhone} - Fax: {!themeCompanyFax}
</div>
</csclmcb:PDFHeaderFooter>
<csclmcb:PDFHeaderFooter type="footer" position="center">
<div style="border-top: 1px solid #ccc; color: {!lettersColour};"><br/><br/> <br/></div>
</csclmcb:PDFHeaderFooter>
<csclmcb:PDFHeaderFooter type="footer" position="right">
<div style="color: {!lettersColour};"><br/>Σελίδα <span class="pageNumber"></span>/<span class="pageCount"></span><br/><br/></div>
</csclmcb:PDFHeaderFooter>
<!-- Start Content -->
<apex:form >
<div style="page-break-before: always;">
<p class="tacTitle" style="color: {!lettersColour} font-family: Arial Unicode MS;">
Application Form
</p>
<div class="docPart">
<!-- Have a master Table... This will have sub-tables side by side... -->
<table style="border:none" width="100%" cellspacing="0" cellpadding="0" id="table1"
align="center" class="masterTable">
<tr>
<td>
<!-- Table on the Left... Customer's Data -->
<table style="border:groove #51e04c; 2px" width="50%" id="table2"
align="left" class="customerDataTable">
<tr>
<td>
<table style="border:none" cellspacing="0" cellpadding="0" width="100%" id="table3"
align="left" class="customerTable">
<h1 style="color: {!lettersColour}; text-align:center; font-family: Arial Unicode MS">
Customer Data
</h1>
<tr>
<td style="background: #b6e39a; color: {!lettersColour}; font-size: 12px;
font-family: Arial Unicode MS; padding: 6px; text-align: left;">
Last Name<br/>
{!opp.Account.LastName}
</td>
<td style="background: #b6e39a; color: {!lettersColour}; font-size: 12px;
font-family: Arial Unicode MS; padding: 6px; text-align: left;">
First Name<br/>
{!opp.Account.FirstName}
</td>
<td style="background: #b6e39a; color: {!lettersColour}; font-size: 12px;
font-family: Arial Unicode MS; padding: 6px; text-align: left;">
Father's Name<br/>
{!opp.Account.MiddleName}
</td>
</tr>
<tr>
<td style="background: #b6e39a; color: {!lettersColour}; font-size: 12px;
font-family: Arial Unicode MS; padding: 6px; text-align: left;">
TIN<br/>
{!opp.Account.el_TIN__c}
</td>
<td style="background: #b6e39a; color: {!lettersColour}; font-size: 12px;
font-family: Arial Unicode MS; padding: 6px; text-align: left;">
DOY<br/>
{!opp.Account.el_Doy_Name__r.Name}
</td>
<td style="background: #b6e39a; color: {!lettersColour}; font-size: 12px;
font-family: Arial Unicode MS; padding: 6px; text-align: left;">
ID Card<br/>
{!opp.Account.cscrm__Passport_Number__pc}
</td>
</tr>
<tr>
<td style="background: #b6e39a; color: {!lettersColour}; font-size: 12px;
font-family: Arial Unicode MS; padding: 6px; text-align: left;">
Street-No<br/>
{!opp.Account.BillingStreet}
</td>
<td style="background: #b6e39a; color: {!lettersColour}; font-size: 12px;
font-family: Arial Unicode MS; padding: 6px; text-align: left;">
City<br/>
{!opp.Account.BillingCity}
</td>
<td style="background: #b6e39a; color: {!lettersColour}; font-size: 12px;
font-family: Arial Unicode MS; padding: 6px; text-align: left;">
Postal Code<br/>
{!opp.Account.BillingPostalCode}
</td>
</tr>
<tr>
<td style="background: #b6e39a; color: {!lettersColour}; font-size: 12px;
font-family: Arial Unicode MS; padding: 6px; text-align: left;">
Phone<br/>
{!opp.Account.Phone}
</td>
<td style="background: #b6e39a; color: {!lettersColour}; font-size: 12px;
font-family: Arial Unicode MS; padding: 6px; text-align: left;">
Mobile<br/>
{!opp.Account.el_Mobile_Phone__c}
</td>
<td style="background: #b6e39a; color: {!lettersColour}; font-size: 12px;
font-family: Arial Unicode MS; padding: 6px; text-align: left;">
Fax<br/>
{!opp.Account.Fax}
</td>
</tr>
<tr>
<td style="background: #b6e39a; color: {!lettersColour}; font-size: 12px;
font-family: Arial Unicode MS; padding: 6px; text-align: left;">
Ε-mail<br/>
{!opp.Account.el_Email__c}
</td>
<td style="background: #b6e39a; color: {!lettersColour}; font-size: 12px;
font-family: Arial Unicode MS; padding: 6px; text-align: left;">
Date Of Birth<br/>
{!DAY(opp.Account.PersonBirthdate)}/{!MONTH(opp.Account.PersonBirthdate)}/
{!YEAR(opp.Account.PersonBirthdate)}
</td>
</tr>
<tr>
<td style="background: #b6e39a; color: {!lettersColour}; font-size: 12px;
font-family: Arial Unicode MS; padding: 6px; text-align: left;">
test <br/>
{!opp.Account.el_Private_Law_Contract__pc}
</td>
</tr>
<tr>
<td style="background: #75a3ff; color: {!lettersColour}; font-size: 12px;
font-family: Arial Unicode MS; padding: 6px; text-align: left;">
Company Name <br/>
</td>
<td style="background: #75a3ff; color: {!lettersColour}; font-size: 12px;
font-family: Arial Unicode MS; padding: 6px; text-align: left;">
Company <br/>
</td>
</tr>
<tr>
<td style="background: #75a3ff; color: {!lettersColour}; font-size: 12px; padding: 6px;
font-family: Arial Unicode MS; text-align: left;">
TIN<br/>
</td>
<td style="background: #75a3ff; color: {!lettersColour}; font-size: 12px; padding: 6px;
font-family: Arial Unicode MS; text-align: left;">
DOY <br/>
</td>
</tr>
<tr>
<td style="background: #75a3ff; color: {!lettersColour}; font-size: 12px; padding: 6px;
font-family: Arial Unicode MS; text-align: left;">
Street-Number <br/>
</td>
<td style="background: #75a3ff; color: {!lettersColour}; font-size: 12px; padding: 6px;
font-family: Arial Unicode MS; text-align: left;">
City <br/>
</td>
<td style="background: #75a3ff; color: {!lettersColour}; font-size: 12px; padding: 6px;
font-family: Arial Unicode MS; text-align: left;">
Postal Code <br/>
</td>
</tr>
<tr>
<td style="background: #75a3ff; color: {!lettersColour}; font-size: 12px; padding: 6px;
font-family: Arial Unicode MS; text-align: left;">
Phone <br/>
</td>
<td style="background: #75a3ff; color: {!lettersColour}; font-size: 12px; padding: 6px;
font-family: Arial Unicode MS; text-align: left;">
Mobile <br/>
</td>
<td style="background: #75a3ff; color: {!lettersColour}; font-size: 12px; padding: 6px;
font-family: Arial Unicode MS; text-align: left;">
Fax <br/>
</td>
</tr>
<tr>
<td style="background: #75a3ff; color: {!lettersColour}; font-size: 12px; padding: 6px;
font-family: Arial Unicode MS; text-align: left;">
Ε-mail <br/>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Tables on the Right side of the PDF -->
<table style="border:groove #51e04c; 2px" cellspacing="0" cellpadding="0" width="50%" id="table5"
class="productChoice">
<tr><td>
<table style="border:none" cellspacing="0" cellpadding="0" width="100%" id="table6"
class="productChoiceTable">
<h1 style="color: {!lettersColour}; font-family: Arial Unicode MS; text-align:center">
Product Selection
</h1>
<tr>
<td style="color: {!lettersColour}; font-size: 12px; padding: 6px; text-align: left;">
<apex:repeat value="{!prodConfigWrapperList}" var="prodConf">
<p style="margin: 0; line-height: 1.5; color: {!lettersColour}; font-weight: bold;">
{!prodConf.pc.Name}
<apex:inputCheckbox selected="true" disabled="true"/>
</p>
</apex:repeat>
<br/> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
<!-- <div style="page-break-after: always" /> -->
</apex:form>
<!-- End Content -->
</div>
</body>
</apex:page>
div. – David Cheng Dec 20 '20 at 19:25