Visualforce dataTable: is there a way to stop it from rendering cellpadding attribute?

Question

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>?

Answer 1

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.

Answer 2

Mentioned above, have you tried removing the attributes? Specify the id

<apex:dataTable id="myTable" value="{!Qualifications}"...

then

<script type="text/javascript">
  document.getElementById("myTable").removeAttribute("cellpadding");
  document.getElementById("myTable").removeAttribute("cellspacing")
</script>

Answer 3

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.

Answer 4

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;
}