Right alignment inside a p:column holding a p:panelGrid

Question

Given the following <p:panelGrid> .

<p:panelGrid style="width: 25%;">
    <p:row>
        <p:column style="text-align: right;">
            a
        </p:column>
    </p:row>
</p:panelGrid>

The text inside <p:column> is aligned right as can be seen below.

I need to display another <p:panelGrid> inside that <p:column> as follows.

<p:panelGrid style="width: 25%;">
    <p:row>
        <p:column style="text-align: right;">
            <p:panelGrid>
                <p:row>
                    <p:column>
                        b
                    </p:column>
                </p:row>
            </p:panelGrid>
        </p:column>
    </p:row>
</p:panelGrid>

The style attribute text-align: right; of <p:column> has no effect in this case.

How to align the inner <p:panelGrid> right?

Answer 1

Since the panelGrid is a table you can float it to the right:

 <p:panelGrid style="width: 25%;">
    <p:row>
       <p:column>
           <p:panelGrid style="float: right">
               <p:row>
                   <p:column>
                       b
                   </p:column>
               </p:row>
           </p:panelGrid>
       </p:column>
   </p:row>
 </p:panelGrid>

Answer 2

在内部面板网格上应用样式

<p:panelGrid style="text-align: right; display:inline-block">

Answer 3

Add class for the panel and apply the styles like below.

 <p:panelGrid style="width: 25%;" styleClass="mytest">
 <p:row>
    <p:column>
        <p:panelGrid>
            <p:row>
                <p:column>
                    b
                </p:column>
            </p:row>
        </p:panelGrid>
    </p:column>
 </p:row>
</p:panelGrid>

CSS

.mytest td
{
  text-align:right;
}

If not work then try the below.

.mytest td
{
  float:right;
}