Change panelGroupLayout to use <table> instead of <div>

As most of us know that ADF by default is converting most of its containers to <div>, but sometimes there is a need to work with <table>, let us see how to do that:

It is very simple, we will use three styles  table, table-row, and table-cell. Let us suppose that we have the following ADF faces code

    <af:panelGroupLayout>
        <!-- some controls goes here -->
    </af:panelGroupLayout>
    <af:panelGroupLayout>
        <!-- some controls goes here -->
    </af:panelGroupLayout>
</af:panelGroupLayout>

We need to convert it to a table with two rows and on column, so it will be

<af:panelGroupLayout inlineStyle="display:table;">
    <af:panelGroupLayout inlineStyle="display:table-row;">
        <af:panelGroupLayout inlineStyle="display:table-cell;">
            <!-- some controls goes g -->
        </af:panelGroupLayout>
    </af:panelGroupLayout>
    <af:panelGroupLayout inlineStyle="display:table-row;">
        <af:panelGroupLayout inlineStyle="display:table-cell;">
            <!-- some controls goes g -->
        </af:panelGroupLayout>
    </af:panelGroupLayout>
</af:panelGroupLayout>

Note if you used layout property for panelGroupLayout with value equal to Horizontal, it will be converted to able but you will not have full control over it where cells will be generated automatically and you cannot add styles to them.