3

I am trying to create this output in Salesforce: 

<table>
  <tr>
    <td>test</td>
    <td>test</td>
  <tr>
  <tr>
    <td>test</td>
  <tr>
  <tr>
    <td>test</td>
  <tr>
</table>

Im using apex:pageBlockSection to display the content and when SF renders I get this: `

<table>
  <tr>
    <td>test</td>
    <td>test</td>
  <tr>
  <tr>
    <td>test</td>
    <td>test</td>
  <tr>
</table>

Is there an apex function that would tell SF to separate the last TR into 2 new ones?

Improve this question
3
  • 1
    Can you post your Visualforce?
    – Dominic
    Jan 16, 2015 at 14:07
  • pageBlockSection always render as a one or two columns table, define with the columns parameter. If you want to have the last TR into 2 new ones, you need to add an empty outputText or maybe a pageBlockSectionItem with a &nbsp;
    – Yann Gorvel
    Jan 16, 2015 at 14:11
  • In order to span two columns into the one (the second and third TR's in your first example) you need to add a colspan parameter to the TD tag: <td colspan="2">test</td>
    – Sergej Utko
    Jan 16, 2015 at 14:23

1 Answer 1

Reset to default
4

In order to create a layout like you want you can use a nested pageBlockSection element. The first "wrapper" section has only one column and the nested section - two. A simple combibation of those two sections results like this:

enter image description here

Here is the code. Note that the CSS is used only to remove the unnecessary paddings so the columns looks like the same:

<style>
.myBlock .dataCol {
    padding-left: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

</style>

<div class="myBlock">
<apex:pageBlock>
    <apex:pageBlockSection columns="1" >       
        <apex:pageBlockSection columns="2">
            <apex:pageBlockSectionItem>Item 1</apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem>Item 2</apex:pageBlockSectionItem>
        </apex:pageBlockSection>        
        <apex:pageBlockSectionItem>Item3</apex:pageBlockSectionItem>
        <apex:pageBlockSectionItem>Item4</apex:pageBlockSectionItem>
    </apex:pageBlockSection>
</apex:pageBlock>
</div>
Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .