function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
vineet kumarvineet kumar 

How to do spacing between columns in pageblocktable in visualforce???

Best Answer chosen by vineet kumar
vineet kumarvineet kumar
I got the solution for this as below:
to do spacing (margin) between columns in pageblocktable there is an attribute that is cellspacing in apex:pageBlockTable tag, by which we can achieve margin/spacing between columns.

Thank you for everyone who tried to provide the solution here.

All Answers

mritzimritzi
Using 'width attribute' or CSS styling using styleClass tag
Example:
VF: 
<apex:page showheader="false" controller="TestTableController">
    <style>
        td.customMargin{
            /*your custom styling*/
        }
        td.customMargin>span{
            /*margin:0 10px;*/
            /*color:red;*/
        }
    </style>
    <!-- uncomment styling to see change -->
    <apex:pageblock title="Account List">
        <apex:pageblockTable value="{!accountList}" var="acc">
            <apex:column headerValue="Id" value="{!acc.Id}" width="200px;" styleClass="customMargin"/>
            <apex:column headerValue="Name" value="{!acc.Name}" width="200px;"/>
            <apex:column headerValue="Street" value="{!acc.BillingStreet}" width="200px;"/>
            <apex:column headerValue="City" value="{!acc.BillingCity}" width="200px;"/>
            
        </apex:pageblockTable>
    </apex:pageblock>
</apex:page>

Apex: 
public class TestTableController {
    public List<Account> accountList{get{
        return new List<Account>([Select Id, Name, Website, BillingStreet, BillingCity From Account Where BillingStreet != null LIMIT 10]);
    }
    set;}
    public TestTableController(){
    }
}

Please mark this as Best Answer, if this helps solve your problem.
 
Raj VakatiRaj Vakati
You need to use the CSS  
<apex:column style="width:200px"

OR 
<apex:pageBlockTable value="{! null }" var="r" columnsWidth="60%,20%,10%,10%">
            <apex:column headerValue="Name1">
            </apex:column>
            <apex:column headerValue="Name2">
            </apex:column>
            <apex:column headerValue="Name3"> 
            </apex:column>
            <apex:column headerValue="Name4"> 
            </apex:column>
        </apex:pageBlockTable>

​
vineet kumarvineet kumar
Hi Mritzi and  Raj Vakati

whatever solution you guys provided not the solution of the issue
pls understand the requirement....  i don't want to change width of the columns ..  i want to add margin between columns.
mritzimritzi
1) You can use html table.
at row level, you can use <apex:repeat> to display data and use custom CSS styling to shape the table the way you want.
  
<table>
    <thead>
        <tr>
            <td>..</td>
            <td>..</td>
            <td>..</td>
            <td>..</td>
        </tr>
    </thead>
    <tbody>
        <apex:repeat value="{!listName}" var="varName">
            <tr>
                <td>{!varName.Field1}</td>
                <td>{!varName.Field2}</td>
                <td>{!varName.Field3}</td>
                <td>{!varName.Field4}</td>
            </tr>
        </apex:repeat>
    </tbody>
</table>

you can make as much style changes as you want.

2) you can switch off StandardStylesheet like this
<apex:page showheader="false" standardStylesheets="false" controller="TestTableController">

Again you'll have to write custom CSS for the table.

Hope this helps.

Please mark this as Best Answer, if this helps solve your problem.
Ajay K DubediAjay K Dubedi
Hi Vineet , 

Below code can fullfill your requirements. Hope this will work for you.

vf page :

<apex:page standardController="Opportunity" tabStyle="Opportunity">
    <apex:pageBlock >
        <apex:pageBlockTable>
            <apex:column value="{!opportunity.Name}" label="Name" width="20%"/>
            <apex:column value="{!opportunity.CloseDate}" label="CloseDate" width="20%"/>
            <apex:column value="{!opportunity.StageName}" label="StageName" width="20%"/>
        </apex:pageBlockTable>
    </apex:pageBlock> 
</apex:page>

    
Please mark this as best answer if this solves your problem.

Thank you
Ajay Dubedi
vineet kumarvineet kumar
I got the solution for this as below:
to do spacing (margin) between columns in pageblocktable there is an attribute that is cellspacing in apex:pageBlockTable tag, by which we can achieve margin/spacing between columns.

Thank you for everyone who tried to provide the solution here.
This was selected as the best answer