How to set width and margin of <p:column> in a <p:dataTable> ? primefaces

Question

I'm using PrimeFaces 3.4.2 and I have to use <p:dataTable>. I want fixe the width of the first column to less than 5 px. for that I created a css class :

.myTableFlux td:nth-child(1) {
    width: 5px !important;
}

this is my table :

<p:dataTable  value="#{bean.listFlux}" var="list" styleClass="myTableFlux">
    <p:column headerText="Status" >
        <h:graphicImage value="/resources/images/so#{list.i}.jpg" />
    </p:column>
    <p:column headerText="Nom">
        <h:outputText value="#{list.name}" />
    </p:column>
</p:dataTable>

the problem is that I can not go below 5 px.

here is the image that I want to have as a result

I can set width less than 5px (first image). how can i delete the margins ? @Daniel — Karim Oukara
you can simply override all the style using inline style.you can find the style properties via using the firebug in Mozilla, or inspect element — Abin Manathoor Devasia
Your initial question is confusing. 5px is not the same as 5%. — BalusC

Mr. Rabbit Mr. Rabbit · Accepted Answer · 2012-12-19T09:47:12

For me, the width-Attribute on the p:column tag works with PrimeFaces 3.4:

<p:column width="3" headerText="longlong">
  <h:outputText value="xyz" />
</p:column>

This code will display like this:

Edit: Found a solution to style the padding of certain columns:

<style>
    .ui-datatable td:nth-child(1) div.ui-dt-c {
    padding: 0 0 0 0 !important;
  }
</style>

PrimeFaces can be a little tricky. You have to track down where the attribute comes from, and overwrite the specific styleClasses.

How to set width and margin of <p:column> in a <p:dataTable> ? primefaces

1 Answers