如何控制PanelGrid内DataTable的对齐？

Question

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

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

Answer 1

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

1. 在浏览器中查看JSF页面。
2. 右键点击该页面。
3. 选择查看来源。

<h:panelGrid>呈现HTML <table>元素; <h:dataTable>也会呈现为HTML <table>元素。数据元素嵌套在<td>元素内，由<h:panelGrid>呈现。因此，将vertical-align <td>的{​​{1}}设置为<h:panelGrid>。

假设top在HTML中的<h:panelGrid>最终为id，请使用以下CSS：

<table id="panelGridId">

表单

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

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

CSS将类似于：

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

实施例

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

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

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

教程

另见：

• HTMLDog CSS tutorial
• CSSTutorial.net

Answer 2

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

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

Answer 3

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

.pgstyle td{ 
vertical-align: top;
}

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

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