views:

203

answers:

3

In Visualforce, I'm using an <apex:dataTable> component as follows:

<apex:dataTable value="{!Qualifications}" var="qual" styleClass="cv_table" >
    <!-- etc...  -->

... and then I'm using CSS to style the table, via the class name. Trouble is, VisualForce renders HTML like this:

<table class="cv_table" id="j_id0:j_id26" border="0" cellpadding="0" cellspacing="0">
    <!-- etc...  -->

The class attribute is there as I wanted, but there's also cellpadding and cellspacing specified, that interfere with my CSS.

Is there a way to stop Visualforce from rendering the cellpadding and cellspacing attributes for an <apex:dataTable>?

+1  A: 

What about providing your own values for these (same as in the CSS)? Ugly but would work.

Other than that - attribute removal / reapplying the class with JavaScript?

I don't think that even removal of SalesForce CSS (<apex:page ... showHeader="false">) will accomplish this task.

eyescream
A: 

I don't know if you can suppress those attributes in Visualforce.

But if the question you're really asking is how do I not let those attributes affect my overall design, then I think CSS can help.

The CSS equivalent of cellpadding is 'padding', and the CSS equivalent of cellspacing is 'border-spacing'. The latter only works on elements of type TD as far as I know.

.cv_table TD {
    border-spacing: 5px;
    padding: 5px;
}
pcorcoran
Yes, I'm a devout believer in CSS, but the cellpadding attribute seems to be overriding it, which is why I want to get rid of it.
codeulike
A: 

It looks like abandoning the <apex:dataTable> tag and using the more low-fi <apex:repeat> tag might be the only way to do this.

codeulike