java PrimeFaces 3.0 - <p:dataTable> 标题与使用 scrollable="true" 不一致
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6536987/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
PrimeFaces 3.0 - <p:dataTable> headers do not line up with using scrollable="true"
提问by Jim Tough
I have a JSF 2 webapp that is using PrimeFaces 3.0 components. On one page, I'm using the <p:dataTable>component inside a composite component to display a table of objects. I've had success with this component until I tried to use the scrollable="true"option. Now the table column headers do not line up with the column content. I have tried using IE 7 (which is the target browser for my client environment) and Firefox 4.0.1 for comparison. Both exhibit the problem, but it is more pronounced in IE 7.
我有一个使用 PrimeFaces 3.0 组件的 JSF 2 webapp。在一个页面上，我使用<p:dataTable>复合组件中的组件来显示对象表。在我尝试使用该scrollable="true"选项之前，我已成功使用此组件。现在表格列标题不与列内容对齐。我曾尝试使用 IE 7（这是我客户端环境的目标浏览器）和 Firefox 4.0.1 进行比较。两者都存在问题，但在 IE 7 中更为明显。
IE 7 screenshot:
IE 7 截图：
Firefox 4.0.1 screenshot:
火狐 4.0.1 截图：
Here is some of my Facelet page code:
这是我的一些 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>
Each of my columns has a style with a fixed width in pixels defined, and the dataTable itself has the heightattribute set. This seems to be the same as what is shown in the Showcase demo and in the 2.2 manual PDF.
我的每一列都有一个以像素为单位定义的固定宽度的样式，并且 dataTable 本身具有height属性集。这似乎与 Showcase 演示和 2.2 手册 PDF 中显示的相同。
To quote the manual:
引用手册：
Scrolling is a way to display data with fixed headers, in order to enable simple scrolling set scrollable options to true, define a fixed height in pixels and set a fixed width to each column.
滚动是显示具有固定标题的数据的一种方式，为了启用简单滚动，将可滚动选项设置为 true，以像素为单位定义固定高度并为每列设置固定宽度。
Can anyone tell me what I'm doing wrong?
谁能告诉我我做错了什么？
I'm using the current PrimeFaces 3.0-M2-SNAPSHOT with the current Mojarra 2.1 JSF RI.
我将当前的 PrimeFaces 3.0-M2-SNAPSHOT 与当前的 Mojarra 2.1 JSF RI 一起使用。
UPDATE
更新
I have moved to the PrimeFaces 3.0-M2 (not snapshot) release and the problem still exists. Following the suggestions by Maple and BalusC, I have (temporarily) removed the column sorting and tried different doc types. I finally settled on the XHTML 1.0 Strict doc type. It does not show any improvement in IE 7, but does show some improvement in Firefox 4.
我已转移到 PrimeFaces 3.0-M2（非快照）版本，但问题仍然存在。按照 Maple 和 BalusC 的建议，我（暂时）删除了列排序并尝试了不同的文档类型。我最终选择了 XHTML 1.0 Strict doc 类型。它在 IE 7 中没有显示出任何改进，但在 Firefox 4 中确实显示出一些改进。
IE 7 with XHTML 1.0 Strict
IE 7 与 XHTML 1.0 Strict
Firefox 4 with XHTML 1.0 Strict
带有 XHTML 1.0 Strict 的 Firefox 4
The <p:dataTable>is inside a <p:panel>which is inside a <p:layout>. Could this be related?
该<p:dataTable>是里面<p:panel>是内部的<p:layout>。这可能有关系吗？
采纳答案by BalusC
This is clearly a CSS/JS issue. A scrollable table with fixed headers is impossible in plain HTML (if tbody { overflow: scroll; }were supported by allbrowsers...). A lotof different CSS/JS solutions(hacks) have been invented to achieve this. I don't have insight in PF 3 source and I don't know which hack it is using. But this definitely needs to be reportedto the PF guys. The only thing which you can do is to check if you're using the proper HTML doctype(read: a strictdoctype) so that at least MSIE doesn't run in quirks mode.
这显然是一个 CSS/JS 问题。带有固定标题的可滚动表格在纯 HTML 中是不可能的（如果所有浏览器tbody { overflow: scroll; }都支持...）。已经发明了许多不同的 CSS/JS 解决方案（hacks）来实现这一点。我不了解 PF 3 源代码，也不知道它使用的是哪种 hack。但这绝对需要向PF家伙报告。您唯一能做的就是检查您是否使用了正确的 HTML 文档类型（阅读：严格的文档类型），以便至少 MSIE 不会在quirks mode 下运行。
E.g. HTML5
例如 HTML5
<!DOCTYPE html>
or XHTML 1.1
或 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">
or XHTML 1.0 Strict
或 XHTML 1.0 严格
<!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">
or maybe XHTML 1.0 Transitional
或者 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">
回答by Jim Tough
The issue is being discussed here on the PrimeFaces support forum.
这个问题正在PrimeFaces 支持论坛上讨论。
As of today (July 20th, 2011) the problem can now be seen in the Labs Showcase hosted by PrimeFaces when using Internet Explorer 7.0 to view it:
截至今天（2011 年 7 月 20 日），使用 Internet Explorer 7.0 查看时，现在可以在 PrimeFaces 托管的 Labs Showcase 中看到该问题：
EDIT:Fixed as of today's PrimeFaces 3.0-M3-SNAPSHOT nightly build (July 22 2011).
编辑：从今天的 PrimeFaces 3.0-M3-SNAPSHOT nightly build（2011 年 7 月 22 日）开始修复。
回答by J Slick
I had this same annoying misaligned header and footer problem on two projects with PF 3.4.1. Playing with header didn't help.
在使用 PF 3.4.1 的两个项目中，我遇到了同样令人讨厌的页眉和页脚未对齐问题。玩标题没有帮助。
Seems to be fixed in PF 3.5.
似乎已在 PF 3.5 中修复。
