【发布时间】：2011-09-26 02:10:42
【问题描述】：
我有一个使用 PrimeFaces 3.0 组件的 JSF 2 webapp。在一个页面上，我使用复合组件内的<p:dataTable> 组件来显示对象表。在我尝试使用 scrollable="true" 选项之前，我已经使用此组件取得了成功。现在表格列标题不与列内容对齐。我尝试使用 IE 7（这是我的客户端环境的目标浏览器）和 Firefox 4.0.1 进行比较。两者都存在问题，但在 IE 7 中更为明显。
IE 7 截图：
Firefox 4.0.1 截图：
这是我的一些 Facelet 页面代码：
<p:dataTable
id="vesselsDataTable"
value="#{cc.attrs.vesselAdapterList}"
var="currentRow"
selection="#{editVesselBean.selectedRow}"
selectionMode="single"
scrollable="true"
height="500">
<p:column
id="imoColumn"
style="width:45px"
sortBy="#{currentRow.imo}">
<f:facet name="header">
<h:outputText value="IMO" />
</f:facet>
<div class="#{currentRow.imoStyleClass}">
<h:outputText value="#{currentRow.imo}"
</div>
</p:column>
<p:column
id="notesIndicatorColumn"
style="width:35px"
sortBy="#{currentRow.hasNotes}">
<f:facet name="header">
<h:outputText value="#{bundle.labelNotes}" />
</f:facet>
<h:outputText
styleClass="noteIndicator"
id="vesselNotesIndicator"
value="#{bundle.stringNoteIndicatorText}"
title="#{currentRow.notesAsTooltipText}"
rendered="#{currentRow.hasNotes}"
</p:column>
<ui:remove>other column definitions omitted for brevity...</ui:remove>
<p:dataTable>
我的每一列都有一个固定宽度（以像素为单位）的样式，并且 dataTable 本身具有height 属性集。这似乎与 Showcase 演示和 2.2 手册 PDF 中显示的相同。
引用手册：
滚动是一种显示带有固定标题的数据的方法，为了启用简单的滚动，请将可滚动选项设置为 true，以像素为单位定义固定高度并为每列设置固定宽度。 p>
谁能告诉我我做错了什么？
我正在使用当前的 PrimeFaces 3.0-M2-SNAPSHOT 和当前的 Mojarra 2.1 JSF RI。
更新
我已移至 PrimeFaces 3.0-M2（非快照）版本，但问题仍然存在。按照 Maple 和 BalusC 的建议，我（暂时）删除了列排序并尝试了不同的文档类型。我最终选择了 XHTML 1.0 Strict 文档类型。它在 IE 7 中没有显示任何改进，但在 Firefox 4 中显示了一些改进。
带有 XHTML 1.0 Strict 的 IE 7
带有 XHTML 1.0 Strict 的 Firefox 4
<p:dataTable> 位于 <p:panel> 内，而 <p:layout> 位于 <p:layout> 内。这有关系吗？
【问题讨论】：
-
在 Firefox 4 上几乎看起来标题偏移差异大致等于滚动条的宽度。我注意到你有一个主题滚轮，当你切换主题时，这个标题宽度会改变吗？
-
我检查了 Primefaces 问题页面 code.google.com/p/primefaces/issues/list 并没有发现此问题列为已知错误。看起来这可能是在 Firefox 和早期版本的 IE 上为列、可滚动数据表设置固定宽度的问题。在旁注中，感谢您花时间写一个清晰简洁的问题。这个网站上可怕的问题数量让我士气低落。
-
删除列的
sortBy属性时会发生什么。排序按钮 DOM 元素中的 CSS 样式是否会妨碍您？ -
感谢您的 cmets Maple。我要去加拿大国庆日，所以周一我会在办公室再看一下。
-
我删除了该表列中的所有
sortBy属性。它没有解决问题。通过整理，我可以看到每个列标题都稍微太小了，所以对于很多列，最后的错位很大。
标签： java css datatable jsf-2 primefaces