How to set width of a p column in a p dataTable in PrimeFaces 3 0

Question

I m using PrimeFaces 3 0-M3 and I have a  lt p dataTable gt  with two columns in it  I want the first column to be fixed at a width of 20px  The other column can use whatever space is left over   Here are screenshots of what I m currently getting       The first  lt p column gt  seems to be ignoring the style setting that should have limited the width  It is sized way too big for the tiny coloured square that is the only content inside it and then the other column is pushed too far to the right   Here is more of my Facelet code    lt p dataTable         id  dataTableExpressions          value    catconBean userDefinedExpressionDataModel           var  currentRow          emptyMessage     EMPTY TABLE MESSAGE             selection    catconBean userDefinedExpressionToEdit           selectionMode  single  gt       lt p ajax              event  rowSelect               listener    catconBean onUserDefinedExpressionRowSelect               update   toolbarForm catconToolbar    gt       lt p ajax              event  rowUnselect               listener    catconBean onUserDefinedExpressionRowUnselect               update   toolbarForm catconToolbar    gt        lt p column id  paletteColor  style  width 20px   gt           lt h panelGroup                  layout  block                  rendered    not empty currentRow paletteColor                   style  width 16px height 16px border thin border-style solid border-color black background-color    currentRow paletteColor RGB      gt           lt h panelGroup                  layout  block                  rendered    empty currentRow paletteColor                   style  width 16px height 16px border thin border-style dashed border-color red background-color white text-align center   gt               lt h outputText value     style  color red font-weight bold     gt           lt  h panelGroup gt       lt  p column gt        lt p column id  name  gt           lt f facet name  header  gt               lt h outputText value    bundle catcon label CategoryName     gt           lt  f facet gt           lt h outputText              value    currentRow name               style    not currentRow definitionComplete    color red            gt       lt  p column gt   lt  p dataTable gt    Can anyone tell me how to modify my Facelet code to make the first column have a fixed width of 20px

User · Answer

Inline styling would work in any case     lt p-column field  Quantity  header  Qt     style     width   48px    gt

User · Answer

This worked for me   lt p column headerText  name  style  width 20px    gt

User · Answer

In PrimeFaces 3 0  that style get applied on the generated inner  lt div gt  of the table cell  not on the  lt td gt  as you  and I  would expect  The following example should work out for you    lt p dataTable styleClass  myTable  gt    with   myTable td nth-child 1        width  20px      In PrimeFaces 3 5 and above  it should work exactly the way you coded and expected

User · Answer

I don t know what browser you re using  but according to w3schools com  nth-child and nth-last-child do now work on MSIE 8   I don t know about 9   http   www w3schools com cssref pr border-style asp will give you more info

User · Answer

can you try   lt p column width  20  gt

User · Answer

For some reason  this was not working   lt p column headerText    width  25px  sortBy    row key   gt    But this worked    lt p column headerText    width  25  sortBy    row key   gt

User · Answer

Addition to  BalusC  s answer  You also need to set width of headers  In my case  below css can only apply to my table s column width    myTable td nth-child 1   myTable th nth-child 1       width  20px

User · Answer

I just did the following  in V 3 5  and it worked like a charm    lt p column headerText  name  width  20px   gt

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

Examples related to css

Examples related to jsf

Examples related to jsf-2

Examples related to primefaces

Examples related to datatable