I'm able to set the color of my dataTable, but how do I change the color of the first line? So here, I'd want to apply a background styling to <apex:facet name="header">Information</apex:facet>

<apex:dataTable bgcolor="EEEEEE" border="below" cellspacing="5%" columnsWidth="30%" value="{!innerClassFieldList}" var="c" width="70%">
    <apex:facet name="header">Information</apex:facet>
    <apex:column value="{!c.label}">
        <apex:facet name="header">Field Name</apex:facet>
    <apex:column value="{!c.value}">
        <apex:facet name="header">Value</apex:facet>

You can style the header by defining its class with the headerClass attribute on the dataTable. Then you can apply CSS styling to that class either in an external css file or somewhere on the page inside of <style> tags. Here you can find all of the available attributes on Data Tables.

If you just want to style the very first facet, you can wrap it in a <div> tag, apply a class to that tag and then style it however you want with CSS.

Alternatively, you may be able to access the first facet by adding a table:first-child {background: #2d97cc; width: 100%;}, but you'd need to investigate if the header is in fact the first child of the table element by looking at the page source of your Visualforce page.

  • hey kyle- thanks for your help, but i'd tried that already. I have 2 headers so to speak, and as a result the column headers (field name and value ) are getting colored. I only want to the top row (information to get colored. – PartOfTheOhana May 1 '14 at 17:00
  • What you could try is: <apex:facet name="header"><span class=tableHeader>Information</span></apex:facet> then add in a style section, something like <style> .tableHeader{background-color:green}</style> – Kyle May 1 '14 at 17:29
  • <apex:facet name="header"><span class="sectionHeader">Information</span></apex:facet> only gets the word information, not the entire row. here is sectionHeader's definition .sectionHeader {background: #2d97cc; width: 100%;} – PartOfTheOhana May 1 '14 at 21:07
  • Edited: added some other things to try. – Kyle May 2 '14 at 16:54

To change the color of the first line, wrap it around div tags. For example..

<div class="colorClass">
 <apex:facet name="header">Information</apex:facet>

And then try adding a color to the above class. Thanks

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.