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>
function Cancel()

    $(".ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable").dialog('close');

function reload()
function msgSave()
    alert('Record saved successfully!!!!');

    <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:outputText value="{!clientDetails[0].First_Name__c}" style="font-family: sans-serif;font-size: 15px;" >

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

      <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">
                      <apex:param name="dreamMapDetails" value="{!objDreamMap.Id}" id="dreamMapId" />
                      <apex:param name="dreamMapDetailsName" value="{!objDreamMap['Name']}" id="dreamMapName" />
              <apex:column value="{!objDreamMap['Contact_Name__c']}"/> 
              <apex:column value="{!objDreamMap['Email__c']}"/> 
              <apex:column value="{!objDreamMap['Agency_Name__c']}"/> 
           <apex:commandButton value="Add Dream Map"  action="{!addDreamMap}" id="addDreamMapPage"/>

      <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>

      <apex:outputPanel id="goalDetailsId">
      <apex:pageBlockSection columns="1" title="Goal Details" rendered="{!showBtn}">
        <!--<apex:outputpanel >
                     <th><br/> <apex:outputLabel value="Status"></apex:outputLabel> </th>
                     <th><br/><apex:selectList value="{!operatorsymbol}" multiselect="false" size="1">
                                 <apex:selectOptions value="{!items}"/>
                    <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: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>
                    <td width="20%">
                    <td width="20%">
                <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>

                     <td width="20%">

                        <td width="20%">
                        <td width="20%">
                        <td width="20%">
                        <td width="20%">

                        <td width="20%">
          <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" />


    <style type="text/css">
            background-color: white;
            border-width: 2px;
            border-style: solid;
            z-index: 9999;
            left: 50%;
            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;
            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;


Kindly help me?


In <apex:column> use style attribute:


<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"/> 
  • But Dear i am no using page block table as i am using apex repeat so i can't use apex column. Kindly let me know other various solutions for the same. – Sourabh Tayal Feb 12 '15 at 13:09
  • Then you can write <table style="border:solid 1px #000" > @SourabhTayal – Ashwani Feb 12 '15 at 13:26

You really don't want to use the "border" attribute anymore. That's been deprecated. I would recommend doing this via CSS.

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.