1

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?

Improve this question
5
  • Varun, You need to add the structure like PageBlock -> PageBlockSection -> PageBlockSection -> table , or you can use PageBlockTable structure.
    – Rahul
    Commented May 14, 2019 at 11:48
  • @Rahul Added page block section as above hierarchy. But the page is still not in structure
    – वरुण
    Commented May 14, 2019 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
    Commented May 14, 2019 at 12:02
  • Getting issue <apex:pageBlockSectionItem> may have no more than 2 child components
    – वरुण
    Commented May 14, 2019 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 ♦
    Commented May 14, 2019 at 12:32

1 Answer 1

Reset to default
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>
Improve this answer

You must log in to answer this question.

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