0

I have a Visualforce page, which is showing table.

<apex:page controller="TestControllerForIssue">
    <style type="text/css">
        .myClass { width: 50px; }
    </style>
    <apex:form >
        <apex:pageBlock>
                <table>
                    <tr>
                        <th style="text-align: center">Quantity</th>
                        <th style="text-align: center">Edition</th>
                    </tr>
                    <tbody>
                        <tr>
                            <td><apex:inputText styleClass="myClass" value="{!productQuantity}"/></td>
                            <td><apex:inputText value="{!model}"/></td>
                        </tr>
                    </tbody>
                </table>
        </apex:pageBlock>
    </apex:form>
</apex:page>

It looks like this:

enter image description here

I need to add pageBlockSection.

Added like this:

<apex:page controller="TestControllerForIssue">
    <style type="text/css">
        .myClass { width: 50px; }
    </style>
    <apex:form >
        <apex:pageBlock>
            <apex:pageBlockSection id="productData">
                <table>
                    <tr>
                        <th style="text-align: center">Quantity</th>
                        <th style="text-align: center">Edition</th>
                    </tr>
                    <tbody>
                        <tr>
                            <td><apex:inputText styleClass="myClass" value="{!productQuantity}"/></td>
                            <td><apex:inputText value="{!model}"/></td>
                        </tr>
                    </tbody>
                </table>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

After adding the section, the table structure is changed in page.

It is now looking like this:

enter image description here

How should I use the pageBlock section with table so the structure of the table is not changed?

5
  • Varun, You need to add the structure like PageBlock -> PageBlockSection -> PageBlockSection -> table , or you can use PageBlockTable structure. – Rahul May 14 '19 at 11:48
  • @Rahul Added page block section as above hierarchy. But the page is still not in structure – वरुण May 14 '19 at 11:59
  • I forgot to mention PageBlockSectionItem please add the structure like PageBlock -> PageBlockSection -> PageBlockSection -> PageBlockSectionItem -> table and keep column=1 on PageBlockSection like <apex:PageBlockSection columns="1"> – Rahul May 14 '19 at 12:02
  • Getting issue <apex:pageBlockSectionItem> may have no more than 2 child components – वरुण May 14 '19 at 12:15
  • Your demo code doesn't seem to match what I'd expect to happen it you had that kind of output on the screen. Please make sure the code matches the screenshot's output. – sfdcfox May 14 '19 at 12:32
2

To use PageBlockSection with HTML table, you will have to include PageBlockSectionItem and have an outputPanel inside PageBlockSectionItem. And columns attribute of PageBlockSection should be set to 1.

The reason outputPanel is included inside PageBlockSectionItem is because, you cannot directly have html table as its child component, as it won't allow more than 2 child components. Hence, add an outputPanel as child component, which will be the only child component of PageBlockSectionItem and set the columns attribute of PageBlockSection to 1.

Below visualforce page should work

<apex:page controller="TestControllerForIssue">
    <style type="text/css">
        .myClass { width: 50px; }
    </style>
    <apex:form >
        <apex:pageBlock>
            <apex:pageBlockSection id="productData" columns="1">
                <apex:pageBlockSectionItem>
                    <apex:outputPanel>
                        <table>
                            <tr>
                                <th style="text-align: center">Quantity</th>
                                <th style="text-align: center">Edition</th>
                            </tr>
                            <tbody>
                                <tr>
                                    <td><apex:inputText styleClass="myClass" value="{!productQuantity}"/></td>
                                    <td><apex:inputText value="{!model}"/></td>
                                </tr>
                            </tbody>
                        </table>
                    </apex:outputPanel>
                </apex:pageBlockSectionItem>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.