PanelGrid Colums are not alligned in same size

[P Arunkumar]

Hi

<p:panel id="panel" header="View Network Details" style="margin-bottom:20px; font-weight: bold;" width="90%" >
			  <p:row>
			  <p:column>
			  <p:panelGrid style="width:100%" columnClasses="colstyle">
			  <p:row>
					<p:column>
						<h:outputLabel value="EPDS V2 ID :" style="font-weight: bold;" />
					</p:column>
					<p:column>
						<h:outputLabel value=" Network ID :" style="font-weight: bold;" />
					</p:column>
					<p:column>
						<h:outputLabel value="Source System :" style="font-weight: bold;" />
					</p:column>
					<p:column>
						<h:outputLabel value="Network ID Type Code :" style="font-weight: bold;" />
					</p:column>

				</p:row> 
				<p:row>
				<p:column>
				<h:outputLabel value="12345678" style="font-weight: bold;" />
				</p:column>
				<p:column>
				<h:outputLabel value="Sample Value" style="font-weight: bold;" />
				</p:column>
				<p:column>
				<h:outputLabel value="Sample System" style="font-weight: bold;" />
				</p:column>
				<p:column>
				<h:outputLabel value="Sample ID Type" style="font-weight: bold;" />
				</p:column>
				</p:row>
				</p:panelGrid>
				
				<p:panelGrid  style="width:100%" >
			  <p:row>
					<p:column >
						<h:outputLabel value="Network ID Description :" style="font-weight: bold;" />
					</p:column>
					<p:column >
						<h:outputLabel value=" Legacy Network Name :" style="font-weight: bold;" />
					</p:column>
					<p:column>
						<h:outputLabel value="Legacy Network Type Code :" style="font-weight: bold;" />
					</p:column>
					<p:column>
						<h:outputLabel value="Network Level Type Code  :" style="font-weight: bold;" />
					</p:column>
				</p:row>
			 
				<p:row>
				<p:column>
				<h:outputLabel value="Sample Description" style="font-weight: bold;" />
				</p:column>
				<p:column>
				<h:outputLabel value="Sample Code" style="font-weight: bold;" />
				</p:column>
				<p:column>
				<h:outputLabel value="Sample Code" style="font-weight: bold;" />
				</p:column>
				<p:column>
				<h:outputLabel value="Sample Code" style="font-weight: bold;" />
				</p:column>
				</p:row> 
				
				</p:panelGrid>
				
						
				</p:column>
				</p:row>
			  </p:panel>  

in panel grid i kept 4 colums , first panel grid colums and second pangrid colums are not alligning properly. it wants to be like table

ex

networkdetails

A B C D
AVALUE BVALUE CVALUE DVALUE

A1 B1 C1 D1
A1VALUE B1VALUE C1VALUE D1VALUE

IT WANTS TO COME LIKE THIS, please help me to solve my issue

for me the result is comming like

A B C D
AVALUE BVALUE CVALUE DVALUE

A1 B1 C1 D1
A1VALUE B1VALUE C1VALUE D1VALUE


the second pannelgrid row colums are not comming in order like 1 panelgrid.

[Tim Holloway]

What you are effectively generating is a pair of HTML TABLE elements. And, just as in HTML, the JSF equivalent auto-sizes columns.

I presume that you are using PrimeFaces, and I'm not that familiar with it, but the stock JSF h:dataTable tag has a columnClasses attribute that can be used to list a set of classes that regulate each column. If these classes include a width specification, you can get consistent widths by simply using the same list of columnClasses for both panelGrids.