PrimeFaces 3.0 - <p：dataTable>标题不与使用scrollable =“true”对齐

Question

我有一个使用PrimeFaces 3.0组件的JSF 2 webapp。 在一个页面上，我在复合组件中使用<p:dataTable>组件来显示对象表。 在尝试使用scrollable="true"选项之前，我已成功使用此组件。 现在表格列标题不与列内容对齐。 我尝试使用IE 7（我的客户端环境的目标浏览器）和Firefox 4.0.1进行比较。 两者都表现出问题，但在IE 7中更为明显。

IE 7截图 ：

IE 7截图

Firefox 4.0.1截图 ：

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，定义固定高度（以像素为单位）并为每列设置固定宽度。

谁能告诉我我做错了什么？

我正在使用当前的PrimeFaces 3.0-M2-SNAPSHOT和当前的Mojarra 2.1 JSF RI。

UPDATE

我已经转移到PrimeFaces 3.0-M2（非快照）版本，问题仍然存在。 根据Maple和BalusC的建议，我（暂时）删除了列排序并尝试了不同的文档类型。 我终于确定了XHTML 1.0 Strict doc类型。 它没有显示IE 7的任何改进，但确实在Firefox 4中显示出一些改进。

IE 7与XHTML 1.0严格

IE 7与XHTML 1.0严格

Firefox 4与XHTML 1.0严格

Firefox 4与XHTML 1.0严格

<p:dataTable>位于<p:panel>内，位于<p:layout> 。 这有关系吗？

Answer 1

这显然是一个CSS / JS问题。 具有固定标题的可滚动表在纯HTML中是不可能的（如果所有浏览器都支持tbody { overflow: scroll; } ...）。 已经发明了许多不同的CSS / JS解决方案（黑客）来实现这一目标。 我对PF 3源没有见解，我不知道它正在使用哪种黑客。 但这肯定需要向PF人员报告。 您唯一能做的就是检查您是否使用了正确的HTML文档类型（读取： 严格的 doctype），以便至少MSIE不会以怪癖模式运行。

例如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严格

<!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 Transitional

<!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">

Answer 2

这个问题正在PrimeFaces支持论坛上讨论。

截至今天（2011年7月20日），现在可以在使用Internet Explorer 7.0查看时由PrimeFaces托管的实验室展示中看到问题：

PrimeFaces Labs Showcase的屏幕截图

编辑：修复了今天的PrimeFaces 3.0-M3-SNAPSHOT每晚构建（2011年7月22日）。

Answer 3

我在PF 3.4.1的两个项目中遇到了同样烦人的页眉和页脚问题。 玩标题没有帮助。

似乎在PF 3.5中得到修复。

PrimeFaces 3.0 - <p：dataTable>标题不与使用scrollable =“true”对齐

问题描述

3 个解决方案

解决方案1
2 已采纳 2011-07-01 14:27:37

解决方案2
1 2011-07-13 21:02:42

解决方案3
0 2013-09-19 21:32:51

PrimeFaces 3.0 - <p：dataTable>标题不与使用scrollable =“true”对齐

问题描述

3 个解决方案

解决方案1 2 已采纳 2011-07-01 14:27:37

解决方案2 1 2011-07-13 21:02:42

解决方案3 0 2013-09-19 21:32:51

解决方案1
2 已采纳 2011-07-01 14:27:37

解决方案2
1 2011-07-13 21:02:42

解决方案3
0 2013-09-19 21:32:51