如何控制PanelGrid中DataTable的对齐方式？

Question

如何控制PanelGrid中DataTable的对齐方式？

8

我有一个多列panelGrid设置，每个列都是一个dataTables。每个dataTables的长度不同，这导致panelGrid被拉伸以适应最大的dataTable（目前为止，这很好）。剩余的dataTables垂直居中（这看起来很糟糕），而不是顶部对齐。

我该如何告诉panelGrid使内容顶部对齐？或者，我的方法完全错误，我需要采取不同的方法（如果是这样，欢迎提供建议）？

- Brian Knoblauch

3个回答

6

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

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

}

在您的XHTML文件中包含。

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

请在父级panelgrid中添加以下代码。

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

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

- Alok

1

你可以避免将它应用于每个td，仅在panelGrid和其中的datatable内部应用。我曾经遇到同样的问题，以下方法对我有效：

.pgstyle td{ 
vertical-align: top;
}

其中pgstyle是您为包含数据表的每个面板网格提供的样式类，例如：

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

- TiyebM

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BalusC · Accepted Answer

JSF以HTML格式呈现，可以使用CSS进行样式设置。以下是元素的检查方法：

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

<h:panelGrid>呈现为HTML的<table>元素；<h:dataTable>也呈现为HTML的<table>元素。数据元素嵌套在由<h:panelGrid>呈现的<td>元素内。因此，请将<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>

所有元素都将对齐到顶部。如果没有规则，所有元素都将居中。由于生成的标记不清楚，很难确定需要应用哪个规则。

教程

另请参阅：