PrimeFaces 3.0 - <p:dataTable> 标题不与使用 scrollable="true" 对齐
Posted
技术标签:
【中文标题】PrimeFaces 3.0 - <p:dataTable> 标题不与使用 scrollable="true" 对齐【英文标题】：PrimeFaces 3.0 - <p:dataTable> headers do not line up with using scrollable="true" 【发布时间】：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"
>
<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 属性。它没有解决问题。通过整理，我可以看到每个列标题都稍微太小了，所以对于很多列，最后的错位很大。
【参考方案1】：
这显然是一个 CSS/JS 问题。带有固定标题的可滚动表格在纯 HTML 中是不可能的（如果 所有 浏览器都支持 tbody overflow: scroll; ...）。 A lot 已经发明了不同的 CSS/JS 解决方案（hacks）来实现这一点。我对 PF 3 源没有深入了解，也不知道它使用的是哪个 hack。但这绝对需要reported 给 PF 家伙。您唯一能做的就是检查您是否使用the proper HTML doctype（阅读：strict doctype），以便至少 MSIE 不会在 quirks mode 中运行。
例如HTML5
<!DOCTYPE html>
或 XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<f:view contentType="text/html">
或 XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<f:view contentType="text/html">
或者也许是 XHTML 1.0 过渡版
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<f:view contentType="text/html">
【讨论】：
我已切换到 XHTML 1.1。在 IE 7 中，它看起来仍然完全是废话。在 Firefox 4 中，它几乎是正确的，但看起来它错位了 1 个像素。不幸的是，我的用户环境是 100% 的 Internet Explorer（现在混合了 IE 6 和 IE 7），所以在 Firefox 中看起来不错对我没有好处。 很可能 PrimeFaces CSS 是在考虑 XHTML 1.0 过渡的情况下编写的。这对你也不起作用吗？然后将其报告为 PF 错误。 根据他们的缺陷报告规则发布到primefaces.prime.com.tr/forum/viewtopic.php?f=3&t=13509。当我得到 PF 开发人员的同意后，将添加到他们的缺陷跟踪器中。【参考方案2】：这个问题正在讨论here on the PrimeFaces support forum。
截至今天（2011 年 7 月 20 日），当使用 Internet Explorer 7.0 查看问题时，现在可以在 PrimeFaces 托管的 Labs Showcase 中看到该问题：
编辑：从今天的 PrimeFaces 3.0-M3-SNAPSHOT nightly build（2011 年 7 月 22 日）开始修复。
【讨论】：
我有 Primefaces 5.1，但标题仍然不适合我。我正在通过在使用 PF 3.4.1 的两个项目中，我遇到了同样令人讨厌的页眉和页脚错位问题。 玩标题没有帮助。
似乎已在 PF 3.5 中修复。
【讨论】：
以上是关于PrimeFaces 3.0 - <p:dataTable> 标题不与使用 scrollable="true" 对齐的主要内容，如果未能解决你的问题，请参考以下文章
如何在 PrimeFaces 3.0 的 p:dataTable 中设置 p:column 的宽度？
https://www.jianshu.com/p/4da29fa310d2