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
bohemianguy100bohemianguy100 

maintain salesforce UI styles with a custom html table

Is there a way to maintain the salesforce UI styles with a custom html table?

 

I am creating an html table:

 

		<table width="100%" cellpadding="5">
			<tr>
				<th>First Name</th>
				<th>Last Name</th>
			</tr>
			<tr>
				<td>{!contact.firstname}</td>
				<td>{!contact.lastname}</td>
			</tr>
		</table>

 I'd like to maintain the salesforce UI styles for this table. 

 

Thanks.

Puja_mfsiPuja_mfsi

Hi,

You can use the standard CSS class to acheive salesforce UI like:

<apex:page standardController="Contact" extensions="CopyTableStyle">
        <apex:form>

              <style>
                   tr.dataRow { 
                       background-color:white; 
                    }
                    tr.dataRow:hover { 
                            background-color: #e3f3ff;
                     };
               </style>
              <apex:pageBlock>
                         <table class="list " border="0" cellpadding="0" cellspacing="0">
                               <tr class="headerRow">
                                         <th class="headerRow"> First Name</th>
                                         <th class="headerRow"> Last Name </th>
                                         <th class="headerRow"> Phone </th>
                                </tr>
                                <tr class="dataRow">
                                          <td class="dataCell">{!contact.FirstName}</td>
                                          <td class="dataCell">{!contact.LastName}</td>
                                          <td class="dataCell">{!contact.phone}</td>
                                 </tr>
                          </table>
                 </apex:pageBlock>
            </apex:form>
</apex:page>

 

Please let me know If u need any help regarding the same and if this post help u plz throw KUDOS by click on star at left.
NasreenbanuNasreenbanu
It worked!!!