DataTable :Issues with overriding the Datatable Styles

[vaj]

Hi

I was trying to override the styles of the P:datatable using the below code. The styles are applied fine on the row elements. But when I apply the style for the column headers, the style is applied only to the headertext alone and not to the entire column.
The css style code which Im using to override the datatable is

Code: Select all

#order-table.mystyle {   
	border-style:groove;
}
 
#order-table.mystyle th{
	text-align:center;
	background-color: #C6C3C6;
	padding:12px;
}
 
#order-table.mystyle td{
	ttext-align:center;
	background-color:#9CD3F7;
	border-top:1px solid;
}
 
#order-table.mystyle td{
	text-align:center;
	background-color:#9CD3F7;
	border-top:1px solid;
}

Code for datatable is below

Code: Select all

<h:head>
<title>Insert title here</title>
<h:outputStylesheet library="css" name="table-style.css" />
</h:head>
<h:body>
	<h1 id="tableID">JSF 2 dataTable example</h1>
	
	<p:dataTable   id="order-table" value="#{order.orderList}" style="width:100%; font-family:Arial; font-size: 12px;"  
	styleClass="mystyle" rowStyleClass="order-table-odd-row,order-table-even-row" var="o">
	    
	  	<p:column id="col1">
	  		<f:facet name="header" >
	  			Order No
	  		</f:facet>
    				#{o.orderNo}
	  	</p:column> 
	  	<p:column id="col2">
	  		<f:facet name="header">Product Name</f:facet>
    				#{o.productName}
	  	</p:column>
	  	
	  	<p:column id="col3">
	  	
	  		<f:facet name="header">Price</f:facet>
    				#{o.price}
	  	</p:column>
	  	
	  	<p:column id="col4">
	  		<f:facet name="header">Quantity</f:facet>
    				#{o.qty}
	  	</p:column>
	 </p:dataTable>
</h:body>

When I try to run the above code in chrome and try to inspect the header column, the style for the header class="ui-state-default" takes the default style. Can you please let me to know how to override the default style. Thanks

[vineet]

.mystyle.ui-datatable .ui-datatable-header{
background: #003946 !important;

}

.mystyle.ui-datatable .ui-datatable-header{
background: #003946 !important;

}

.mystyle.ui-datatable .ui-datatable-even{
background: white ;


}

.mystyle.ui-datatable .ui-datatable-odd.ui-state-hover{
background: #F4E7C1 ;

}

.mystyle.ui-datatable .ui-datatable-even.ui-state-hover{
background: #F4E7C1 ;

}

.mystyle.ui-datatable .ui-datatable-even.ui-state-highlight{
background: #fff9e5 ;

}

.mystyle.ui-datatable .ui-datatable-odd.ui-state-highlight{
background: #fff9e5 ;

}

.mystyle.ui-datatable .ui-datatable-data-empty td {
color:red;
font-weight:bold;
}
.ui-datatable.mystyle th {
background: EAAB00;
font-family: verdana;
font-size: 1em;
}


.mystyle.ui-datatable .ui-expanded-row-content{
background:white;
}

use above styleclasses to override the datatable css

[vaj]

Thanks a lot vineet for the above reply. It really helped.

[TinaTwilight]

It's strange and dissapointing as at the Component Suite Showcase the example presents exactly the same code (at least I believe so .
If anyone encountered the same problem please give me a helping hand.