How to Change the column Separtor Styles

[mvsekar02]

Hi

I am using jsf 1. 2 & richfaces3.3.0,created table using <rich:dataTable> i want to chage that column separator line in different color & look. i tried but default style & color only appeared.


my source code as follows..

<rich:dataTable headerClass="tableheading" border="1" id="enduser_tickethistory_datatable" columnsWidth="50,100,100,100,130,130,300" value="#{EnduserTicketTableFetcher.ticketData}" var="ticket">
<rich:column id="enduser_tickethistory_ticketid_column">
<f:facet name="header" >
<h:outputText id="enduser_tickethistory_ticketid_header" value="Ticket Id"/>
</f:facet>

<h:commandLink actionListener="#{EndUserTicketActionListener.processAction}" action="#{SessionValidator.checkSession}" id="enduser_ticketid_data" value="#{ticket.ticketID}">
<f:param name="clickedMenuItem" value="ticketdata"/>
<f:param name="ticketstatus" value="#{ticket.status}"/>
</h:commandLink>
</rich:column>
<rich:column id="enduser_tickethistory_groupname_column">
<f:facet name="header" >
<h:outputText id="enduser_tickethistory_groupname_header" value="Group Name"/>
</f:facet>
<h:outputText id="enduser_groupname_data" value="#{ticket.groupName}"/>
</rich:column>
<rich:column id="enduser_tickethistory_assignedto_column">
<f:facet name="header" >
<h:outputText id="enduser_assignedto_header" value="Assigned to Id"/>
</f:facet>
<h:outputText id="enduser_assignedto_data" value="#{ticket.assignedTo}"/>
</rich:column>
<rich:column id="enduser_tickethistory_status_column">
<f:facet name="header" >
<h:outputText id="enduser_status_header" value="Status"/>
</f:facet>
<h:outputText id="enduser_status_data" value="#{ticket.status}"/>
</rich:column>
<rich:column id="enduser_tickethistory_createddate_column">
<f:facet name="header" >
<h:outputText id="enduser_createddate_header" value="Created Date"/>
</f:facet>
<h:outputText id="enduser_createddate_data" value="#{ticket.createdDate}"/>
</rich:column>
<rich:column id="enduser_tickethistory_thresholddate_column">
<f:facet name="header" >
<h:outputText id="enduser_thresholddate_header" value="Threshold Date"/>
</f:facet>
<h:outputText id="enduser_thresholddate_data" value="#{ticket.thresholdDate}"/>
</rich:column>
</rich:dataTable>

<rich:jQuery selector="#enduser_tickethistory_datatable th" query="addClass('header1')" />
<rich:jQuery selector="#enduser_tickethistory_datatable tr:odd" query="addClass('odd-row')" />
<rich:jQuery selector="#enduser_tickethistory_datatable tr:even" query="addClass('even-row')" />
<rich:jQuery selector="#enduser_tickethistory_datatable tr"
query="mouseover(function(){jQuery(this).addClass('active-row')})"/>
<rich:jQuery selector="#enduser_tickethistory_datatable tr"
query="mouseout(function(){jQuery(this).removeClass('active-row')})"/>



How to change that styles? can anybody give me the solution.. all the suggestions are welcome.



Cheers..
Sekar M

[ilya_shaikovsky]

you could simply check with Firebug which css properties overrides needed ones or missed.

[mvsekar02]

I want to change the row,column separtor line color

[ilya_shaikovsky]

so just redefine border-* css properties using proper style classes. you could check them from guide or as mentioned look with firebug plugin.