Datatable not aligning with header when scrolling

[rafaelhnakano]

Hello guys,

I´m facing a problem with datatable where the header not aligning with de content of table, only when I use scrollable.

My primefaces is 5.3.

Below some screenshots about my page and code of xhtml

Someone can help me? thanks a lot!

https://photos.google.com/search/_tra_/ ... DS-9KGtDuI

Code: Select all

<p:remoteCommand name="onCellEdit" update=":message" />
<p:dataTable id="tableOperacaoDespesa" value="#{operacaoController.listOperacaoDespesa}" filteredValue="#{operacaoController.listOperacaoDespesaFiltro}"
var="operacaoDespesa" reflow="true" selection="#{operacaoController.listOperacaoDespesasSelecionados}"
emptyMessage="Não há registro" scrollable="true" scrollHeight="450" rowKey="#{operacaoDespesa.id}"
editable="true" editMode="cell">
	                		
	<p:ajax event="cellEdit" listener="#{operacaoController.atualizarOperacaoDespesa}" oncomplete="onCellEdit();" />
	                			
	<p:column selectionMode="multiple" style="text-align:center" width="2%"/>
	                			
	<p:column headerText="Código" filterBy="#{operacaoDespesa.id}" sortBy="#{operacaoDespesa.id}" styleClass="center" filterStyleClass="filtro"
	filterStyle="width:40%">
		<h:outputText value="#{operacaoDespesa.id}"/>
	</p:column>
	                		
	<p:column headerText="Despesa" filterBy="#{operacaoDespesa.despesa.descricao}" sortBy="#{operacaoDespesa.despesa.descricao}" filterMatchMode="contains" styleClass="center" width="20%" filterStyleClass="filtro" filterStyle="width:80%">
		<h:outputText value="#{operacaoDespesa.despesa.descricao}" title="Código: #{operacaoDespesa.despesa.id}"/>
	</p:column>
	                		
	<p:column headerText="Fornecedor" filterBy="#{operacaoDespesa.fornecedor.razao}" sortBy="#{operacaoDespesa.fornecedor.razao}" filterMatchMode="contains" styleClass="center"  width="30%" filterStyleClass="filtro" filterStyle="width:90%">
		<p:cellEditor>
			<f:facet name="output">	  
				<h:outputText value="#{operacaoDespesa.fornecedor.razao}" title="Código(AN8): #{operacaoDespesa.fornecedor.id}"/>
			</f:facet>
			<f:facet name="input">
				<p:selectOneMenu value="#{operacaoDespesa.fornecedor}" style="width:60%;" converter="fornecedorConverter">
					<f:selectItems value="#{operacaoController.listFornecedor}" var="fornecedor" itemLabel="#{fornecedor.id} - #{fornecedor.razao}" 
					itemValue="#{fornecedor}" itemDescription="#{fornecedor.razao}"/>
				</p:selectOneMenu>
			</f:facet>
		</p:cellEditor>
	</p:column>
	                		
	<p:column headerText="Valor" filterBy="#{operacaoDespesa.valorDespesa}" sortBy="#{operacaoDespesa.valorDespesa}" styleClass="center" 
	filterStyleClass="filtro" filterStyle="width:60%">
		<h:outputText value="#{operacaoDespesa.valorDespesa}">
			<f:convertNumber minFractionDigits="2" maxFractionDigits="2"/>
		</h:outputText>
	</p:column>
	                		
	<p:column headerText="V Real" filterBy="#{operacaoDespesa.valorDespesaReal}" sortBy="#{operacaoDespesa.valorDespesaReal}" styleClass="center" 
	filterStyleClass="filtro" filterStyle="width:60%">
		<p:cellEditor>
			<f:facet name="output">
				<h:outputText value="#{operacaoDespesa.valorDespesaReal}">
					<f:convertNumber minFractionDigits="2" maxFractionDigits="2"/>
				</h:outputText>
			</f:facet>
			<f:facet name="input">
				<pe:inputNumber value="#{operacaoDespesa.valorDespesaReal}" dir="rtl" decimalPlaces="2"/>
			</f:facet>
		</p:cellEditor>
	</p:column>
	                		
	<p:column headerText="Dt Envio" filterBy="#{operacaoDespesa.dataEnvioIntegracao}" sortBy="#{operacaoDespesa.dataEnvioIntegracao}" styleClass="center" filterStyleClass="filtro" filterStyle="width:60%">
		<h:outputText value="#{operacaoDespesa.dataEnvioIntegracao}" converter="facesLocalDateConverter"/>
	</p:column>
	                		
	<p:column headerText="Pedido" filterBy="#{operacaoDespesa.numeroPedido}" sortBy="#{operacaoDespesa.numeroPedido}" styleClass="center" 
	filterStyleClass="filtro" filterStyle="width:60%">
		<h:outputText value="#{operacaoDespesa.numeroPedido}"/>
	</p:column>
</p:dataTable>