+ Start a Discussion
Uttpal chandraUttpal chandra 

CSS not working when convert to Pdf


 

Hi All,

When i try to convert the below page into Pdf using renderAs="Pdf"  its CSS not working correctly and table got disturbed.
 
<apex:page applyHtmlTag="false" showHeader="false" applyBodyTag="false">
    
 <html>
   <head>

       <meta charset="utf-8"/>
       <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
      <title>Generating HTML DEMO</title>
     <link href="https://fonts.googleapis.com/css?family=Fira+Sans+Condensed:400,700" rel="stylesheet" />
      <style type="text/css">
         h1, h2, h3, h4, h5, h6{
         margin: 0;
         }
        body{
	font-family: 'Fira Sans Condensed', sans-serif;
	font-size: 1rem;
	color: #3a3a3a;
    font-weight: 400;
}


          
          
      </style>
   </head>
<body style="padding: 0; margin: 0; font-family: 'Fira Sans Condensed', sans-serif;">
<!-- Main Table -->
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tbody>
            <tr>
                <td align="center">
                  <!-- Main Table -->
                    <table width="70%" border="0" cellspacing="0" cellpadding="0">
                     <!-- Start Header Heading ( Section 1)-->
                     	<tr>
	                        <td align="center" width="100%">
	                            <table width="100%">
	                                <tr>
		                                <td align="center">
		                                    <h2>Main Heading top level </h2>
		                                </td>
	                                </tr>
	                                <tr>
	                                    <td align="center">
	                                    	<h5>(This line contain some data and it is below the main heading and top of the table and displaying some data...... New data and not showing)</h5>
	                                   	</td>
	                                </tr>
	                            </table>
	                        </td>
                     	</tr> 
                     <!-- End Header Heading (Section 1)-->

              
	                    <tr>
	                        <td>
	                            <table border="1" style="border-collapse: collapse;" cellpadding="0" cellspacing="0" align="center" width="100%">
	                              <!-- Start Left Side -->
	                            <td width="40%" valign="top">
	                                <table>
	                                    <tr>
	                                       <td>
	                                          <table class="table" cellpadding="0" cellspacing="15" style="border-bottom: 1px solid;">
	                                             <tr>
	                                                <td>
	                                                   <h2>Line  1</h2>
	                                                </td>
	                                             </tr>
	                                             <tr>
	                                                <td>Line  2</td>
	                                             </tr>
	                                             <tr>
	                                                <td>Line  3</td>
	                                             </tr>
	                                             <tr>
	                                                <td>Line  4</td>
	                                             </tr>
	                                             <tr>
	                                                <td>Line  5</td>
	                                             </tr>
	                                             <tr>
	                                                <td>Line  6</td>
	                                             </tr>
	                                             <tr>
	                                                <td>Line  7</td>
	                                             </tr>
	                                             <tr>
	                                                <td>Line  8</td>
                                                  </tr>
	                                             <tr>
	                                                <td>Line  1324567981021354564654654654646546</td>
	                                             </tr>
	                                          </table>
	                                       </td>
	                                    </tr>
	                                    <!-- Left Bottom Information -->
	                                    <tr>
	                                    	<td>
	                                    		<table class="table" cellpadding="0" cellspacing="15">
	                                    			<tr>
	                                    				<td>
	                                    					<h2>Line 1</h2>
	                                    				</td>
	                                    			</tr>
	                                    			<tr>
	                                    				<td>
	                                    					Line 1
	                                    				</td>
	                                    			</tr>
	                                    			<tr>
	                                    				<td>
	                                    					Line 1
	                                    				</td>
	                                    			</tr>
	                                    			<tr>
	                                    				<td>
	                                    					Line 1
	                                    				</td>
	                                    			</tr>
	                                    			<tr>
	                                    				<td>
	                                    					Line 1
	                                    				</td>
	                                    			</tr>
	                                    		</table>
	                                    	</td>
	                                    </tr>
	                                </table>
	                            </td>
	                           <td width="60%" valign="top">
	                                <table class="table" width="100%">
	                                    	
	                                    	 <tr>
	                                        	<td>
	                                        		<table width="100%" style="border-bottom: 1px solid #000;">
	                                        			<tr>
															<td width="50%">
					                                          	<table cellpadding="2" cellspacing="0">
					                                          		<tr>
					                                          			<td>Data 1</td>
					                                          		</tr>
					                                          		<tr>
					                                          			<td><strong>Answer 1</strong></td>
					                                          		</tr>

					                                          	</table>
				                                          	</td>
				                                          	<td width="50%">
					                                          	<table>
					                                          		<tr>
					                                          			<td>Data</td>
					                                          		</tr>
					                                          		<tr>
					                                          			<td><strong>Answer </strong></td>
					                                          		</tr>

					                                          	</table>
				                                          	</td>
		                                          		</tr>
		                                          	</table>
	                                            </td>
	                                        </tr>
	                                        <!-- End Column 1 -->

	                                        <!-- Start Column 2 -->
	                                        <tr>
	                                        	<td>
	                                        		<table width="100%" style="border-bottom: 1px solid #000;">
	                                        			<tr>
															<td width="50%">
					                                          	<table cellpadding="2" cellspacing="0">
					                                          		<tr>
					                                          			<td>Data</td>
					                                          		</tr>
					                                          		<tr>
					                                          			<td>&nbsp;</td>
					                                          		</tr>

					                                          	</table>
				                                          	</td>
				                                          	<td width="50%">
					                                          	<table>
					                                          		<tr>
					                                          			<td>Data</td>
					                                          		</tr>
					                                          		<tr>
					                                          			<td>&nbsp;</td>
					                                          		</tr>

					                                          	</table>
				                                          	</td>
		                                          		</tr>
		                                          	</table>
	                                            </td>
	                                        </tr>
	                                        <!-- End Column 2 -->

	                                        <!-- Start Column 3 -->
	                                        <tr>
	                                        	<td>
	                                        		<table width="100%" style="border-bottom: 1px solid #000;">
	                                        			<tr>
															<td width="50%">
					                                          	<table cellpadding="2" cellspacing="0">
					                                          		<tr>
					                                          			<td>Data</td>
					                                          		</tr>
					                                          		<tr>
					                                          			<td>&nbsp;</td>
					                                          		</tr>

					                                          	</table>
				                                          	</td>
				                                          	<td width="50%">
					                                          	<table>
					                                          		<tr>
					                                          			<td>Data</td>
					                                          		</tr>
					                                          		<tr>
					                                          			<td><strong>Answer </strong></td>
					                                          		</tr>

					                                          	</table>
				                                          	</td>
		                                          		</tr>
		                                          	</table>
	                                            </td>
	                                        </tr>
	                                        <!-- End Column 3 -->

	                                        <!-- Start Column 4 -->
	                                        <tr>
	                                        	<td>
	                                        		<table width="100%" style="border-bottom: 1px solid #000;">
	                                        			<tr>
															<td width="50%">
					                                          	<table cellpadding="2" cellspacing="0">
					                                          		<tr>
					                                          			<td>Data</td>
					                                          		</tr>
					                                          		<tr>
					                                          			<td>&nbsp;</td>
					                                          		</tr>

					                                          	</table>
				                                          	</td>
				                                          	<td width="50%">
					                                          	<table>
					                                          		<tr>
					                                          			<td>Data</td>
					                                          		</tr>
					                                          		<tr>
					                                          			<td><strong>Answer </strong></td>
					                                          		</tr>

					                                          	</table>
				                                          	</td>
		                                          		</tr>
		                                          	</table>
	                                            </td>
	                                        </tr>
	                                        <!-- End Column 4 -->
	                                   	
	                                   		<!-- Start Column 5 -->
	                                        <tr>
	                                        	<td>
	                                        		<table width="100%" style="border-bottom: 1px solid #000;">
	                                        			<tr>
															<td width="50%">
					                                          	<table cellpadding="2" cellspacing="0">
					                                          		<tr>
					                                          			<td>Data.</td>
					                                          		</tr>
					                                          		<tr>
					                                          			<td>&nbsp;</td>
					                                          		</tr>

					                                          	</table>
				                                          	</td>
				                                          	<td width="50%">
					                                          	<table>
					                                          		<tr>
					                                          			<td>Data</td>
					                                          		</tr>
					                                          		<tr>
					                                          			<td>&nbsp;</td>
					                                          		</tr>

					                                          	</table>
				                                          	</td>
		                                          		</tr>
		                                          	</table>
	                                            </td>
	                                        </tr>
	                                        <!-- End Column 5 -->

	                                        <!-- Start Column 6 -->
	                                        <tr>
	                                        	<td>
	                                        		<table width="100%" style="border-bottom: 1px solid #000;">
	                                        			<tr>
															<td width="50%">
					                                          	<table cellpadding="2" cellspacing="0">
					                                          		<tr>
					                                          			<td>Data</td>
					                                          		</tr>
					                                          		<tr>
					                                          			<td>&nbsp;</td>
					                                          		</tr>

					                                          	</table>
				                                          	</td>
				                                          	<td width="50%">
					                                          	<table>
					                                          		<tr>
					                                          			<td>Data</td>
					                                          		</tr>
					                                          		<tr>
					                                          			<td>&nbsp;</td>
					                                          		</tr>

					                                          	</table>
				                                          	</td>
		                                          		</tr>
		                                          	</table>
	                                            </td>
	                                        </tr>
	                                        <!-- End Column 6 -->

	                                        <!-- Start Column 7 -->
	                                        <tr>
	                                        	<td>
	                                        		<table width="100%" style="border-bottom: 1px solid #000;">
	                                        			<tr>
															<td width="50%">
					                                          	<table cellpadding="2" cellspacing="0">
					                                          		<tr>
					                                          			<td>Data: <strong>Answer </strong></td>
					                                          		</tr>
					                                          	</table>
				                                          	</td>
		                                          		</tr>
		                                          	</table>
	                                            </td>
	                                        </tr>
	                                        <!-- End Column 7 -->
	                                        <!-- Start Column 7 -->
	                                        <tr>
	                                        	<td>
	                                        		<table width="100%">
	                                        			<tr>
															<td width="50%">
					                                          	<table cellpadding="2" cellspacing="0">
					                                          		<tr>
					                                          			<td>Data</td>
					                                          		</tr>
					                                          	</table>
				                                          	</td>
		                                          		</tr>
		                                          	</table>
	                                            </td>
	                                        </tr>
	                                        <!-- End Column 7 -->
	                                </table>
	                            </td>
	                              <!-- End Right Side -->
	                           </table>
	                        </td>
	                    </tr>
                    <!-- Company Info Row Start (Section 2) -->
                    <tr>
                    	<td height="30"></td>
                    </tr>


                    </table>


                  
                </td>
            </tr>
        </tbody>
    </table>
<!-- End Main Table -->
</body>
</html>
    
</apex:page>

Anyone why it is not working?
Ajay K DubediAjay K Dubedi
Hi Uttpal,
Try the below code it Works fine.
You have to just set false to standardStylesheets.

<apex:page applyHtmlTag="false" standardStylesheets="false" showHeader="false" applyBodyTag="false" renderAs="pdf">

User-added image
   
I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.
Thanks,
Ajay Dubedi