0

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>
    <apex:column value="{!c.value}">
        <apex:facet name="header">Value</apex:facet>
    </apex:column>
</apex:dataTable>

2 Answers 2

2

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.

5
  • 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. Commented May 1, 2014 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
    Commented May 1, 2014 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%;} Commented May 1, 2014 at 21:07
  • Edited: added some other things to try.
    – Kyle
    Commented May 2, 2014 at 16:54
  • This answer only change the background color of the text we provide in span element. But the good idea is to change the background color of the whole column header background not the text. @Kyle, any idea, how to achieve it?? Commented Jan 21, 2021 at 8:47
0

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

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

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .