Primefaces Group Table Set Column Width Manually - html

Question

I am using Primefaces 5 and with a Group data table with more than 150 columns. I am trying to set each column width manually. I tried the threads here, but still primefaces is auto adjusting my column widths to show all columns in one screen without any horizontal scrolling. I am looking for one place to set the column width in px or %.
I am not sure how to approach with Group Heading.
I tried so far:
resizableColumns="true" style="table-layout: fixed"
Set style="width:auto" and
set in css:
.repoTab.ui-datatable table { width: auto !important; }
My xhtml here:
<h:form>
<p:dataTable id="userTable" value="#{userDAO.data}" var="ub"
binding="#{userBean.dataTable}" paginator="true" rows="500"
resizableColumns="true" style="table-layout: fixed">
<f:facet name="header">
<p:toolbar>
<!-- Header Codes Here -->
</p:toolbar>
</f:facet>
<p:columnGroup type="header">
<p:row>
<p:column colspan="3" headerText="Application" style="width:auto" />
<!-- <p:column colspan="6" headerText="Primary" width="100%" /> -->
</p:row>
<p:row>
<!-- ************ Application ************* -->
<p:column colspan="3" headerText="Key" style="width:auto" />
<!-- ************ Primary ************* -->
</p:row>
<p:row>
<!-- ************ Appl Key ************* -->
<p:column headerText="Id" width="50" />
<p:column headerText="F Name" width="150" />
<p:column headerText="L Name" width="150" />
</p:row>
</p:columnGroup>
<p:column headerText="Id" width="50">
<h:outputText value="#{userBean.dataTable.rowIndex+1}" />
</p:column>
<p:column headerText="First Name">
<h:outputText value="#{ub.firstName}" />
</p:column>
<p:column headerText="Last Name">
<h:outputText value="#{ub.lastName}" />
</p:column> -->
</p:dataTable>
</h:form>
</html>

Answer 1

Keep your table CSS style:
.ui-datatable table { width: auto !important; }
Remove the width attribute and set the min-width on the columns style:
<p:columnGroup type="header">
<p:row>
<!-- ... -->
</p:row>
<p:row>
<p:column headerText="Id" style="min-width: 50px;" />
<p:column headerText="F Name" style="min-width: 150px;" />
<p:column headerText="L Name" style="min-width: 150px;" />
</p:row>
</p:columnGroup>
Hope it helps.

Answer 2

I solved it by adding expandableRowGroups="true", then I could use the style property.
<p:dataTable expandableRowGroups="true" scrollable="true" >
<p:columnGroup type="header">
<p:row>
<p:column rowspan="2" headerText="txt" style="width:50px;" />
</p:row>
</p:columnGroup>
</p:dataTable>