I have a datatable with col span and row span. The table looks fine in Desktop mode, but when seen in Responsive mode, the table looks very odd and a user cannot make sense out of this data table.
Xhtml
Code: Select all
<p:dataTable var="esl" value="#{estleaves.eleaves}" reflow="true"
>
<p:columnGroup type="header">
<p:row>
<p:column rowspan="2" headerText="Employee" styleClass="Wid10"/>
<p:column colspan="4" headerText="Jan" />
<p:column colspan="4" headerText="Feb" />
</p:row>
<p:row>
<p:column headerText="w1" styleClass="Fs9" style="padding-left:0;padding-right:0" />
<p:column headerText="w2" styleClass="Fs9" style="padding-left:0;padding-right:0" />
<p:column headerText="w3" styleClass="Fs9" style="padding-left:0;padding-right:0" />
<p:column headerText="w4" styleClass="Fs9" style="padding-left:0;padding-right:0" />
<p:column headerText="w1" styleClass="Fs9" style="padding-left:0;padding-right:0" />
<p:column headerText="w2" styleClass="Fs9" style="padding-left:0;padding-right:0" />
<p:column headerText="w3" styleClass="Fs9" style="padding-left:0;padding-right:0" />
<p:column headerText="w4" styleClass="Fs9" style="padding-left:0;padding-right:0" />
</p:row>
</p:columnGroup>
<p:column>
<h:outputText value="#{esl.empName}" />
</p:column>
<p:column styleClass="Fs14" >
<h:outputText value="#{esl.jan.w1}" />
</p:column>
<p:column styleClass="Fs14" >
<h:outputText value="#{esl.jan.w2}" />
</p:column>
<p:column styleClass="Fs14" >
<h:outputText value="#{esl.jan.w3}"/>
</p:column>
<p:column styleClass="Fs14" >
<h:outputText value="#{esl.jan.w4}"/>
</p:column>
<p:column styleClass="Fs14" >
<h:outputText value="#{esl.feb.w1}" />
</p:column>
<p:column styleClass="Fs14" >
<h:outputText value="#{esl.feb.w2}" />
</p:column>
<p:column styleClass="Fs14" >
<h:outputText value="#{esl.feb.w3}"/>
</p:column>
<p:column styleClass="Fs14" >
<h:outputText value="#{esl.feb.w4}"/>
</p:column>
</p:dataTable>