JSF dataTable rerender loses CSS style

Question

I have a dataTable that works as desired when it is rendered via a normal (non-ajax) request/response cycle.

I have a style defined that is to apply a background color and padding to the very first row in the table:

.myTable tr:first-child td {
  padding-top: 25px;
  background-color: yellow;
}

As I mentioned above, the padding and background color appear perfectly when loaded via the typical request/response. However there are a couple of actions that can cause this table to be re-rendered via AJAX. When that happens, the table is correctly reloaded (it's data), but the above style is not reapplied.

Since there is no way to specifically assign the first row a CSS class when using the dataTable component. So, I used the above CSS selector to get the first row. Has anyone ever dealt with an issue like this before? Is my only option to try and use jQuery in the oncomplete of ALL...which may be many different places...actions that can trigger the table to be re-rendered?

My issue is that I am trying to avoid using a richfaces table component for speed's sake and I need to have the table be scrollable. So, I am using a browser specific CSS solution to srcoll the table body and keep the headers static. The main hang-up is that I need the first row of the table to have a top padding value that pushes it down below the fixed location of the table header.

Answer 1

Since you are rerendering only dataTable, default style of the table gets applied.

You have to rerender the style code too along with the dataTable, that might solve your problem.

Try something like code below and rerender outputPanel instead of dataTable:

<a4j:outputPanel>
    <h:dataTable>
            //Data
    </h:dataTable>
    <style>
       .myTable tr:first-child td {
          padding-top: 25px;
          background-color: yellow;
        }
    </style>
</a4j:outputPanel>