Datatable header and column are not align

[PhiHDN]

Hi,

I have an issue with datatable when scrollable is enabling.
Please see the screenshot below (sorry for censored data)

Code: Select all

<p:dataTable var="entry" value="#{bean.list}" tableStyle="table-layout:auto" selection="#{bean.selected}" rowKey="#{entry.name}" scrollable="true" scrollHeight="250">
		<p:column selectionMode="single" style="width:16px;text-align:center"/>

		<p:column headerText="Name">
			<h:outputText value="#{entry.name}" />
		</p:column>
	
		<p:column headerText="Value">
			<h:outputText value="#{entry.value}" />
		</p:column>
	</p:dataTable>

It is find if I don't use scrollable attribute.
Please help to fix it.
For your information, I am using PF 5.3 and Modena theme + layout.

Thank you!

[mert.sincan]

Please remove table-layout:auto or change the width value of first column. Because radio-button class has width: 16px and margin: 5px. Exp;
please try;

Code: Select all

<p:column selectionMode="single" style="width:22px;text-align:center"/>
or 
<p:column selectionMode="single" style="width:5%px;text-align:center"/>

[PhiHDN]

Thanks aragorn!

Please see below updates:

Code: Select all

<p:dataTable var="entry" value="#{bean.itemList}" tableStyle="table-layout:auto" scrollable="true" scrollHeight="250">
		<p:column headerText="Test Headers 1">
			<h:outputText value="Test Content 001" />
		</p:column>
	
		<p:column headerText="Test Headers 2">
			<h:outputText value="Test Content 002" />
		</p:column>

		<p:column headerText="Test Headers 3">
			<h:outputText value="Test Content 003" />
		</p:column>
		
		<p:column headerText="Test Headers 4">
			<h:outputText value="Test Content 001" />
		</p:column>
	
		<p:column headerText="Test Headers 5">
			<h:outputText value="Test Content 002" />
		</p:column>

		<p:column headerText="Test Headers 6">
			<h:outputText value="Test Content 003" />
		</p:column>
	</p:dataTable>

With tableStyle="table-layout:auto"


Without tableStyle="table-layout:auto"


Removing table-layout:auto would resolve this issue.
However, I would like to use tableStyle="table-layout:auto" to make column width fix the contents.
Could you suggest me solutions on this situation?

Thank you,

[mert.sincan]

Maybe, you can try with;

Code: Select all

.Test.ui-datatable.ui-datatable-scrollable .ui-datatable-scrollable-body{
   padding-right: 17px;
}

//xhtml
<p:dataTable styleClass="Test" tableStyle="table-layout:auto" ../>

[PhiHDN]

Thank you but it doesn't work.

Actually, I found this thread: http://forum.primefaces.org/viewtopic.php?f=3&t=31208
I have tried all suggestions on that thread but not succeed.