Layout of many columns with datatable

Question

I’m having a problem with datatable layout. I ended up creating a very extensive component (if I’m not mistaken, about 25 columns). I need to move one of these columns (year) according to the scroll bar.

Move with the bar I already managed, using position:fixed. However, I would like to know how:

• Leave the header at the same height as the others;
• Remove the "shadow" that remains when moving the attribute (see img 2)
• How to leave the original colors. If I take the background-color, it becomes transparent and makes it impossible to view.

Follows XHTML of the column in question:

<p:column width="187" headerText="Ano" style="background-color:#ddd; position:fixed; width:187;">
        <h:outputText value="#{f.ano}"/>
</p:column>

Answer 1

Guys, I got the problem solved.

Follow code and print.

    <p:column width="187" style="background-color:inherit; position:fixed; width:187;">
         <f:facet name="header">        
            <div style="padding-bottom:25% !important; padding-top: 5%!important; background-color:inherit !important;">                
                <h:outputText value="Ano"/>
            </div>
         </f:facet>
         <h:outputText value="#{f.ano}"/>
    </p:column>