【问题标题】：How to control alignment of DataTable inside of a PanelGrid?如何控制 PanelGrid 内 DataTable 的对齐方式？
【发布时间】：2010-08-23 12:25:37
【问题描述】：

我有一个多列 panelGrid 设置，每个列都有 dataTables。每个数据表的长度都不同。这导致 panelGrid 伸展以适应最大的数据表（到目前为止，这很好）。其余数据表垂直居中（这不好，因为它在屏幕上看起来很糟糕）而不是顶部对齐。

如何告诉 panelGrid 顶部对齐内容？或者，我的方法是否完全错误，我需要做一些不同的事情（如果是，欢迎提出建议）？

【问题讨论】：

标签： css jsf datatable alignment panelgrid

【解决方案1】：

JSF 呈现为 HTML 并且可以使用 CSS 设置样式。检查元素如下：

在浏览器中查看 JSF 页面。
右键单击页面。
选择查看源代码。

<h:panelGrid> 呈现 HTML <table> 元素； <h:dataTable> 也呈现为 HTML <table> 元素。数据元素嵌套在<td> 元素中，由<h:panelGrid> 呈现。因此，将<h:panelGrid> 的<td> 的vertical-align 设置为top。

假设<h:panelGrid> 有一个id 在HTML 中以<table id="panelGridId"> 结尾，请使用以下CSS：

#panelGridId>tbody>tr>td { 
    vertical-align: top;
}

表格

如果网格是表单的一部分，那么 CSS 将需要包含表单的 ID。例如：

<form id="amazingForm">
  <h:panelGrid id="amazingGrid">
    ...
  </h:panelGrid>
</form>

CSS 将类似于：

#amazingForm\:amazingGrid > tbody > tr > td {
  vertical-align: top;
}

示例

这是一个示例 HTML 文档，显示了在使用 CSS 配置的表格中的垂直对齐：

<!-- language: html -->

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 3547485</title>
        <style>#myid>tbody>tr>td { vertical-align: top; }</style>
    </head>
    <body>
        <table id="myid">
            <tbody>
                <tr>
                    <td><table><tbody><tr><td>n1a</td></tr><tr><td>n1b</td></tr></tbody></table></td>
                    <td><table><tbody><tr><td>n2a</td></tr></tbody></table></td>
                    <td><table><tbody><tr><td>n3a</td></tr><tr><td>n3a</td></tr><tr><td>n3c</td></tr></tbody></table></td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

全部对齐到顶部。没有规则，所有人都会居中。很难准确说出您需要应用什么规则，因为不清楚您生成的标记是什么样子的。

教程

另见：

【讨论】：

好的，开始工作了。我最终将

【解决方案2】：

您可以使用 CSS 使面板网格顶部对齐。

.mystyle {
vertical-align: top;
horizontal-align: center;

}

包含在您的 xhtml 文件中。

<link href="#{resource['css:style.css']}" rel="stylesheet" type="text/css"/>

并将此代码添加到父面板网格中。

 <h:panelGrid columns="3" columnClasses="mystyle, mystyle, mystyle">

注意：对于 3 列，您必须包含 3 次

【讨论】：

【解决方案3】：

您可以避免将其应用于每个 td，仅在其中的 panelGrid 和 datatable 内。我遇到了同样的问题，以下对我有用：

.pgstyle td{ 
vertical-align: top;
}

其中 pgstyle 是你给每个 panelGrid 的 styleClass 包含一个数据表，比如：

<h:panelGrid columns="1" styleClass="pgstyle">
<rich:dataTable ..>
 ....
</rich:dataTable>
</h:panelGrid>

【讨论】：