如何控制PanelGrid内DataTable的对齐？

Question

如何控制PanelGrid内DataTable的对齐？

Bri*_*uch 8 css datatable jsf alignment panelgrid

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

如何告诉panelGrid顶级证明内容？或者,我的方法是完全错误的,我需要做一些不同的事情(如果是这样,欢迎提出建议)？

Answer 1

Bal*_*usC 8

JSF呈现为HTML,可以使用CSS进行样式设置.检查元素如下:

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

在<h:panelGrid>生成一个HTML <table>元素; 所述<h:dataTable>呈现为HTML <table>元素,以及.数据元素嵌套在<td>元素内部,由<h:panelGrid>.因此,设置vertical-align的<td>的<h:panelGrid>到top.

假设<h:panelGrid>有一个id最终结果与<table id="panelGridId">HTML一样,请使用以下CSS:

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

Run Code Online (Sandbox Code Playgroud)

形式

如果网格是表单的一部分,那么CSS将需要包含表单的ID.例如:

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

Run Code Online (Sandbox Code Playgroud)

CSS将类似于:

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

Run Code Online (Sandbox Code Playgroud)

例

这是一个示例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>

Run Code Online (Sandbox Code Playgroud)

所有都与顶部对齐.没有规则,所有人都会集中.由于不清楚生成的标记是如何形成的,因此很难说出需要应用哪些规则.

教程

也可以看看:

Answer 2

小智 6

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

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

}

Run Code Online (Sandbox Code Playgroud)

包含在您的xhtml文件中.

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

Run Code Online (Sandbox Code Playgroud)

并在父panelgrid中添加此代码.

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

Run Code Online (Sandbox Code Playgroud)

注意:对于3列,您可以将其包含3次

归档时间：	15 年，3 月前
查看次数：	17900 次
最近记录：	7 年，7 月前