[SalesForce] Pass border in Table

now i am creating a visualforce page and in VF page, i am passing map list and display using apex repeat. now i am facing problem when i want to get border in table.

VF Page:-

<apex:page controller="ContactGoalControllerTest" showheader="true">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"></link>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css"></link>
<script>
function Cancel()
{

    //$("#opppopup").close();
    $(".ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable").dialog('close');
    //j$modalDialog.dialog('close');


}
function reload()
{
    location.reload();
}
function msgSave()
{
    alert('Record saved successfully!!!!');
}
</script>

    <apex:form >

    <apex:pageMessages escape="false"> </apex:pageMessages>

    <apex:pageBlock mode="edit" id="block">

         <apex:outputPanel id="detailPanel" >
             <apex:outputLabel style="font-family: sans-serif;font-size: 15px;" >
                 Contact Name : 
             </apex:outputLabel>

             <apex:outputText value="{!clientDetails[0].First_Name__c}" style="font-family: sans-serif;font-size: 15px;" >
             </apex:outputText>
             <br/><br/>

             <apex:outputLabel style="font-family: sans-serif;font-size: 15px;">
                 Email Id : 
             </apex:outputLabel>
             <apex:outputText value="{!clientDetails[0].Email__c}" style="font-family: sans-serif;font-size: 15px;">
             </apex:outputText>
             <br/><br/>
         </apex:outputPanel>

      <apex:pageBlockSection columns="1" title="Dream Map Details">
         <apex:pageBlockTable value="{!dreamMapDetails }" var="objDreamMap">
          <apex:column headerValue="DreamMap No " >
                  <apex:commandLink action="{!goalsobjectivesDetailsList}" rerender="goalDetailsId" status="status">
                      {!objDreamMap['Name']}
                      <apex:param name="dreamMapDetails" value="{!objDreamMap.Id}" id="dreamMapId" />
                      <apex:param name="dreamMapDetailsName" value="{!objDreamMap['Name']}" id="dreamMapName" />
                  </apex:commandLink>
         </apex:column>
              <apex:column value="{!objDreamMap['Contact_Name__c']}"/> 
              <apex:column value="{!objDreamMap['Email__c']}"/> 
              <apex:column value="{!objDreamMap['Agency_Name__c']}"/> 
           </apex:pageBlockTable>
           <apex:commandButton value="Add Dream Map"  action="{!addDreamMap}" id="addDreamMapPage"/>
      </apex:pageBlockSection>

      <apex:outputpanel >
        <apex:actionstatus id="status">
            <apex:facet name="start">
                <div class="waitingSearchDiv" id="el_loading" style="height:10%;opacity:0.65;width:100%;">
                    <div class="waitingHolder" style="top:220px; width: 81px;">
                        <img class="waitingImage" src="/img/loading.gif" title="Please Wait..." />
                        <span class="waitingDescription">Please Wait...</span>
                    </div>
                </div>
            </apex:facet>
        </apex:actionstatus>
    </apex:outputpanel> 

      <apex:outputPanel id="goalDetailsId">
      <apex:pageBlockSection columns="1" title="Goal Details" rendered="{!showBtn}">
      <h4>{!strDreamMapName}</h4>
        <!--<apex:outputpanel >
                <tr>
                     <th><br/> <apex:outputLabel value="Status"></apex:outputLabel> </th>
                     <th><br/><apex:selectList value="{!operatorsymbol}" multiselect="false" size="1">
                                 <apex:selectOptions value="{!items}"/>
                                 </apex:selectList><p/></th>
                    <th><br/><apex:selectList value="{!statusSelectedValue}" multiselect="false" size="1" onchange="filterGoalData()"  >
                             <apex:selectOptions value="{!itemsStatus}"/>
                              <apex:actionFunction action="{!goalDetailsList}" name="filterGoalData" reRender="pbTable"/>
                           </apex:selectList><p/></th>
                </tr>
         </apex:outputpanel>-->
     <apex:outputpanel id="pbTable">
        <table >
            <apex:repeat value="{!mainList }" var="goalDetails">

            <tr style="font-size:12px; font-weight:bold;">
                        <td> Goal Name </td>
                        <td> Goal Type</td>
                    </tr>  
                <tr>
                    <td width="20%">
                        {!goalDetails.goalName}
                    </td>
                    <td width="20%">
                        {!goalDetails.goalType}
                    </td>
                </tr>
                <tr>
                <apex:repeat value="{!goalDetails.objList}" var="objDetails">
                    <table border="1">

                     <tr border="1" style="font-size:12px; font-weight:bold;">
                        <td> Objectives </td>
                        <td> Service Needed</td>
                        <td> Start Date </td>
                        <td> Target Date </td>
                        <td> Potential Barrier </td>
                        <td> Potential Strength </td>
                        <td> Action </td>
                    </tr>  

                     <td width="20%">
                            {!objDetails.Describe_Objectives__c}
                        </td>

                        <td width="20%">
                            {!objDetails.Service_Needed__c}
                        </td>
                        <td width="20%">
                            {!objDetails.Start_Date__c}    
                        </td>
                        <td width="20%">
                            {!objDetails.Target_Date__c}
                        </td>
                        <td width="20%">
                            {!objDetails.Potential_Barrier__c}
                        </td>

                        <td width="20%">
                            {!objDetails.Potential_Strength__c}
                        </td>
                    </tr>
                    </table>
                </apex:repeat>
                </tr>
            </apex:repeat>
        </table>    
           </apex:outputpanel>
          <p>*Note:Click on the objective count to see the details of the Dream Map {!strDreamMapName}.</p>
         <apex:commandButton action="{!AddGoal}" value="Add Goal" id="theButton" />
      </apex:pageBlockSection>

     </apex:outputPanel>



     </apex:pageBlock>
    </apex:form>
    <style type="text/css">
        .custPopup{
            background-color: white;
            border-width: 2px;
            border-style: solid;
            z-index: 9999;
            left: 50%;
            padding:10px;
            position: relative;
            /* These are the 3 css properties you will need to change so the popup
            displays in the center of the screen. First set the width. Then set
            margin-left to negative half of what the width is. You can add
            the height property for a fixed size pop up if you want.*/
            width: 65%;
            margin-left: -460px;
            top:100px;
        }
        .popupBackground{
            background-color:rgba(0, 0, 0, 0.27);
            opacity: 1;
            filter: alpha(opacity = 20);
            position: fixed;
            width: 100%;
            height: 500%;
            top: 0;
            left: 0;
            z-index: 9998;
        }

    </style>
 </apex:page>

Kindly help me?

Best Answer

In <apex:column> use style attribute:

Example:

<apex:column value="{!objDreamMap['Contact_Name__c']}" style="border:solid 1px #000"/> 

Alternatively you can use StyleClass attribute as well to provide name of css selector.

<apex:column value="{!objDreamMap['Contact_Name__c']}" styleclass="table_css"/> 
Related Topic