How to Control Alignment of Datatable Inside of a Panelgrid

How to control alignment of DataTable inside of a PanelGrid?

JSF renders as HTML and can be styled with CSS. Inspect the element as follows:

View the JSF page in a browser.
Right-click the page.
Choose View Source.

The <h:panelGrid> renders an HTML <table> element; the <h:dataTable> renders as an HTML <table> element, as well. The data elements are nested inside the <td> element, rendered by the <h:panelGrid>. So, set the vertical-align of the <td> of the <h:panelGrid> to top.

Assuming that the <h:panelGrid> has an id which ends up as <table id="panelGridId"> in HTML, use the following CSS:

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

Forms

If the grid is part of a form, then the CSS will need to include the form's ID. For example:

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

The CSS will resemble:

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

Example

Here's an example HTML document that shows vertical alignment working within a table configured using 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>

All get aligned to top. Without the rule, all get centered. It's hard to tell what rule exacty you need to apply since it's unclear how your generated markup look like.

Tutorials

Panel grid alignment in jsf 1.2

ya got the answer .panelColumns td { vertical-align: top; } is working fine. :-)

Aligning content inside panelGrid columns

Based on this answer, you can do like this (I like this approach the most)

<h:panelGrid columnClasses="className">

.className {
    vertical-align: top;
}

How to align PanelGrid to center? JSF-Primefaces

The JSF <p:panelGrid> component renders a HTML <table> element which is by default a block level element. To center the block level element itself, you should set its horizontal margin to auto instead of attempting to center its inline contents.

.panelGridCenter {
    margin: 0 auto;
}

How to align contents of p:panel vertical-align to center

<p:panel style="height:500px;position:relative;"/>
    <p:panelGrid columns="1" styleClass="centered">
        <div class="component-spacing-top"/>
        <h:graphicImage alt="#{business.businessName}" value="#{business.logoFullPath}"    class="small-panel-image" />
        <div class="component-spacing-top"/>
    </p:panelGrid>
</p:panel>

height value is randomly given it does not matter, but do not erase position:relative.

.centered {
position: absolute;
height: 100px;
top: 0;
bottom: 0;
margin:auto;
}

For horizontal you should add below rules:

left:50%;margin-left:-100px;width:200px;

Look out, margin-left value is the -1/2 times of width value.

Result:

Sample Image

If width is not fixed you can try this way it works on me and aligns it center horizontally and vertically at same time:

<p:panel style="line-height:200px;padding: 5% 0;position: relative;"/>
    <p:panelGrid columns="1" styleClass="centered">
        <div class="component-spacing-top"/>
        <h:graphicImage style="vertical-align:middle;" alt="#{business.businessName}" value="#{business.logoFullPath}"    class="small-panel-image" />
        <div class="component-spacing-top"/>
    </p:panelGrid>
</p:panel>

Note that graphicImage has style property as well.

.centered {
position:relative;
height: 100px;
margin:0 auto;
padding: 10% 0;
}

Result:

Sample Image

Even if doesn't work you should check the link that I gave inside about. That was what I am doing there are 6 ways and you should mix them.

About
Demo

Put multi elements into a column in PanelGrid columns

Use h:panelGroup like

<p:panelGrid columns="4">
    <h:outputText value="A" />
    <h:panelGroup>
        <h:outputText value="B" />
        <h:outputText value="C" />
    <h:panelGroup>
    <h:outputText value="D" />
    <h:outputText value="E" />
</p:panelGrid>

How to Control Alignment of Datatable Inside of a Panelgrid