Apex Code Development You need to sign in to do that
Don't have an account?
Admin User 10568 Styling Rowspan Bottom Border
Hi,
This table uses a map to group data to render with rowspan.
Works a treat.
Where it gets tricky is rendering a bottom-border across the table with rowspan.
This is how it renders currently. The thick bottom-border needs to span the last of type for the group.
This table uses a map to group data to render with rowspan.
Works a treat.
Where it gets tricky is rendering a bottom-border across the table with rowspan.
This is how it renders currently. The thick bottom-border needs to span the last of type for the group.
<apex:page standardController="REPRO__Project__c" extensions="ProjectONSExtension" renderAs="pdf" showHeader="false" sidebar="false" >
<h1 style= "font-family: sans-serif; font-weight: bold; text-align: center;">{!REPRO__Project__c.name}</h1>
<p style= "font-family: sans-serif; text-align: center;">{!REPRO__Project__c.REPRO__Street__c}, {!REPRO__Project__c.REPRO__City__c} <br/> Price List as of {! TODAY()} </p>
<table border="4px solid black;" align="center" cellpadding="5" style="border-collapse: collapse; font-family: sans-serif; text-align: center; cell-color:white;" >
<tr style= "font-family: sans-serif; font-weight: bold; text-align: center;" >
<th style="border: 2px solid black;">Level</th>
<th style="border: 2px solid black;">Property</th>
<th style="border: 2px solid black;">Type</th>
<th style="border: 2px solid black;">Bdr</th>
<th style="border: 2px solid black;">Bath</th>
<th style="border: 2px solid black;">Study</th>
<th style="border: 2px solid black;">Internal Size m² </th>
<th style="border: 2px solid black;">External Size m² </th>
<th style="border: 2px solid black;">Car </th>
<th style="border: 2px solid black;">Price </th>
</tr>
<apex:repeat id="myRepeatHeader" value="{!LevelList}" var="key">
<apex:variable var="count" value="{!1}"/>
<apex:repeat id="contactDetails" value="{!oncs[key]}" var="att">
<tr>
<apex:outputPanel layout="none" rendered="{!count==1}"><td rowspan="{!(modulecountMap[key])}" style="border: 2px solid black;" >
<apex:outputText value="{!att.Level}" /></td>
</apex:outputPanel>
<td style="border: 2px solid black;"><apex:outputText value="{!att.PropertyPriceListName}" style="{!IF ((att.Status !='Available'),"color: #A9A9A9;","")}" /></td>
<td style="border: 2px solid black;"><apex:outputText value="{!att.RType}" style="{!IF ((att.Status !='Available'),"color: #A9A9A9;","")}" /></td>
<td style="border: 2px solid black;"><apex:outputPanel style="{!IF ((att.Status !='Available'),'color: #A9A9A9;','')}" >
<apex:outputText value="{!att.Bdr}" rendered="{!att.Status = 'Available'}" />
</apex:outputPanel></td>
<td style="border: 2px solid black;"> <apex:outputPanel style="{!IF ((att.Status !='Available'),'color: #A9A9A9;','')}" >
<apex:outputLabel value="{!att.Bth}" rendered="{att.Status ='Available'}" />
<apex:outputText value="{!att.Bth}" rendered="{!att.Status = 'Available'}" />
</apex:outputPanel></td>
<td style="border: 2px solid black;"><apex:outputPanel style="{!IF ((att.Status !='Available'),'color: #A9A9A9;','')}" >
<apex:outputLabel value="{!att.Study}" rendered="{att.Status ='Available'}" />
<apex:outputText value="{!att.Study}" rendered="{!att.Status = 'Available'}" />
</apex:outputPanel></td>
<td style="border: 2px solid black;"> <apex:outputPanel style="{!IF ((att.Status !='Available'),'color: #A9A9A9;','')}" >
<apex:outputLabel value="{!att.Internal}" rendered="{att.Status ='Available'}" />
<apex:outputText value="{!att.Internal}" rendered="{!att.Status = 'Available'}" />
</apex:outputPanel></td>
<td style="border: 2px solid black;"><apex:outputPanel style="{!IF ((att.Status !='Available'),'color: #A9A9A9;','')}" >
<apex:outputLabel value="{!att.External}" rendered="{att.Status ='Available'}" />
<apex:outputText value="{!att.External}" rendered="{!att.Status = 'Available'}" />
</apex:outputPanel></td>
<td style="border: 2px solid black;"><apex:outputPanel style="{!IF ((att.Status !='Available'),'color: #A9A9A9;','')}" >
<apex:outputLabel value="{!att.Car}" rendered="{att.Status ='Available'}" />
<apex:outputText value="{!att.Car}" rendered="{!att.Status = 'Available'}" />
</apex:outputPanel></td>
<td style="border: 2px solid black;"> <apex:outputPanel style="{!IF ((att.Status !='Available'),'color: #A9A9A9;','')}" >
<apex:outputLabel value="{!att.Price}" rendered="{att.Status ='Available'}" />
<apex:outputText rendered="{!att.Status = 'Available'}" value="${0,number,#,###,###.00}" >
<apex:param value="{!att.Price}"/></apex:outputText>
<apex:outputLabel value="Reserved" rendered="{!att.Status != 'Available'}"/>
</apex:outputPanel></td>
<apex:variable var="count" value="{!count+1}"/>
</tr>
</apex:repeat>
</apex:repeat>
</table>
<br></br>
<div style="font-family: sans-serif; text-align:center;">
<apex:image value="{!$Resource.CgLogo}" width="50%" />
</div>
<p style= "font-family: sans-serif; text-align: center;" >Level 2, 102-108 Toorak Road, South Yarra <br/>
Telephone 03 9827 1177<br/>
www.castrangilbert.com.au
</p>
</apex:page>
>> http://santanuboral.blogspot.com/2017/02/display-records-with-rowspan-in.html
The above link has an implementation of showing records with row span that you can try checking and modifying to suit your scenario.
Let me know if it helps you and close your query by marking it as the best answer so that it can help others in the future.
Thanks.