[SalesForce] apex dataTable not applying css

A simple dataTable has no CSS when rendered in Chrome. It just renders plain text.

            <apex:dataTable value="{!outstandingCoachingTasks}" var="task" id="taskTable"
                rowClasses="odd,even" styleClass="tableClass">
                <apex:facet name="caption">table caption</apex:facet>
                <apex:facet name="header">table header</apex:facet>
                <apex:facet name="footer">table footer</apex:facet>

                <apex:column>
                    <apex:facet name="header">Name</apex:facet>
                    <apex:facet name="footer">column footer</apex:facet>
                    <apex:outputText value="{!task.Name}"/>
                </apex:column>

                <apex:column>
                    <apex:facet name="header">Owner</apex:facet>
                    <apex:facet name="footer">column footer</apex:facet>
                    <apex:outputText value="{!task.Task_For__c}"/>
                </apex:column>

            </apex:dataTable>

Best Answer

An <apex:dataTable> is always unstyled. You might want to use <apex:pageBlockTable> within an <apex:pageBlock>.

See https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_pageBlockTable.htm

Even so, you might get plain unstyled tables if the standard Salesforce stylesheets have been disabled on the page level.

Check for <apex:page standardStylesheets="false"> at the very top of the page.

See https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_page.htm

Related Topic