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