代码之家 › 专栏 › 技术社区 › Brian Knoblauch

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

panelgrid alignment datatable jsf css

Brian Knoblauch · 技术社区 · 14 年前

我有一个多列panelGrid设置,每个列都有dataTables。每个数据表的长度都不同。这将导致panelGrid向外扩展以适应最大的数据表(到目前为止,这很好)。其余的数据表是垂直居中的(这不好,因为它在屏幕上看起来很可怕),而不是顶部对齐。

3 回复 | 直到 10 年前

Dave Jarvis James Eichele 7 年前

JSF呈现为HTML,可以用CSS设置样式。按以下步骤检查滤芯:

在浏览器中查看JSF页面。
查看源 .

这个 <h:panelGrid> 呈现HTML <table> 元素;元素 <h:dataTable> 呈现为HTML <表> 元素,以及。数据元素嵌套在 <td> <h:panelGrid> . 所以,设置 vertical-align 的 <td> <h:panelGrid> top .

假设 <h:panelGrid> id 最终成为 <table id="panelGridId"> 在HTML中,使用以下CSS:

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

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

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

#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>

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

教程

另请参见:

Alok 12 年前

您可以使用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次

TiyebM 10 年前

您可以避免将它应用于每个td,只在panelGrid内部和其中的datatable中。

.pgstyle td{ 
vertical-align: top;
}

在哪里? pgstyle公司 为每个panelGrid提供的styleClass包含一个datatable,如:

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

推荐文章

Shubham · 如何在R中查找数据表的两个多类别列之间的差异/setdiff()

3 年前

CRaw · 表格中的标题文本对齐:前2个单元格左对齐,后3个单元格右对齐

3 年前

ParaPrototype · 如何在单列可搜索数据表中求和合计以及如何添加日期范围

3 年前

Jafar Khan · 如何使用laravel和ajax方法添加angular 12数据表

3 年前

ColinA · Powershell从datatable更改输出对象名称

3 年前

Davide Vitali · 填充后的ListView为空

7 年前

mfg · 分页不显示在datatable中

7 年前

znstrider · Bokeh-更新渲染器和DataTable的源-使用回调?

7 年前

DotNetSpartan · 如何在datagrid中绑定到数据表的空行的第一个单元格上设置光标

7 年前

Gerle Batde · 如何使用Datatable C跳过=<2个空行?

7 年前