How to Set Width of a P:Column in a P:Datatable in Primefaces 3.0

How to set width of a p:column in a p:dataTable in PrimeFaces 3.0?

In PrimeFaces 3.0, that style get applied on the generated inner <div> of the table cell, not on the <td> as you (and I) would expect. The following example should work out for you:

<p:dataTable styleClass="myTable">

with

.myTable td:nth-child(1) {
    width: 20px;
}

In PrimeFaces 3.5 and above, it should work exactly the way you coded and expected.

Set p:dataTable p:column width

I always use

<p:dataTable ........ tableStyle="width:auto">

And does what I think you expect your datatable to do.

setting Column width for Datatable primefaces

style="table-layout: fixed" on the table element is what you are looking for. Default table layout is "auto", which makes sure no cells are smaller than the content. Be ware that text that can't fit will overflow.

how can I adjust width of p:column in p:panelGrid ?

you can either use a hard coded value:

<p:column style="width:20px">

or a percentage :

<p:column style="width:20%">

depending on what suits you best.

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

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.

Set width of a frozen column

In order to change the width of the frozen columns, use the following CSS class:

/* Change frozen width */
.ui-datatable-frozenlayout-left {
   width: 20%;
}

Here's an online Demo, and a sample code on github.

Hope this helps.

---

Related Topics