8

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

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

4

3 回答 3

8

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

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

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

假设<h:panelGrid>有一个idwhich 以<table id="panelGridId">HTML 结尾，请使用以下 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>

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

教程

也可以看看：

于 2010-08-23T14:58:46.073 回答
6

您可以使用 CSS 使 panelgrids 顶部对齐。

.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 次

于 2012-10-22T11:09:29.173 回答
1

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

.pgstyle td{ 
vertical-align: top;
}

其中pgstyle是您为每个 panelGrid 提供的 styleClass 包含一个数据表，例如：

<h:panelGrid columns="1" styleClass="pgstyle">
<rich:dataTable ..>
 ....
</rich:dataTable>
</h:panelGrid>
于 2015-03-09T15:52:31.393 回答