CSS only applies to last datatable in Primefaces

Question

I have a page where I have to add multiple data tables. One datatable is working fine, but as soon as I add one more same datatable by just changing id of the component. The width of the columns on first datatable is not following to what I have set. It gets disturbed and only last table is getting the width and CSS values. Following is the datatable:

<p:dataTable widgetVar="Tb" id="tbWList" var="row"
                            value="#{aBean.items}" rowKey="#{row.itemId}"
                            scrollable="true" emptyMessage="No Item."
                            resizableColumns="true" style="width:100%;"
                            filteredValue="#{aBean.filteredItemList}">
                            
                            <p:column>
                                <f:facet name="header">
                                    <h:outputText value="NAME"  style="float:left;"/>
                                </f:facet>
                                <h:outputText id="wName" value="#{row.name}">
                                    <p:tooltip for="wName" value="#{row.name}" />
                                </h:outputText>
                            </p:column>
                            <p:column width="100">
                                <f:facet name="header">
                                    <h:outputText value="VIEW" />
                                </f:facet>
                                
                                <h:commandLink id="viewW"
                                    action="#{aBean.actionS(row.itemId,row)}"
                                    styleClass="myStyle" />
                            </p:column>
                            <f:facet name="footer"></f:facet>
                        </p:dataTable>

I am copying the same datatable again with id changed to tbWList2 and the first table stops using width 100, only last table is using this value now.

I am using JDK21, Wildly30 and Primefaces 12.

Answer 1

Adding the following two CSS classes fixed the issue.

.ui-datatable {
    display: table;
}
.ui-datatable table {
    border: hidden !important;
    table-layout: auto !important;
}