!important in css isn't working

Question

I'm trying to override the background of my rows in the table This is what I did:

<tr style="background-color:#000099 !important;"> 

and this was the result: http://onlinehandytools.com/blah.php?board=EDE&level=AL&subject=biology&year=2010 I've spent 2 hours on that, I've googled everywhere nothing seems to work The only thing that have worked is

<style>
td{ background-color:#000099 !important;" }
</style>

But I don't want to do this, I will have different background colors of rows. I tried to make seperate classes for each kind of row but td.classname didn't work either

Answer 1

I think you want to add this to your kindo css file , because kindo script will overwrite your css:

kindo.common.min.css:line # 9

.k-grid td

this is the css for the td just add your background color.

Edit:

Maybe this is what you are searching for:

$(document).ready(function(){$(".k-grid td:contains('Jan')").css("background-color","#000099");}); 

this is how it looks

Answer 2

You don't have to add !important to inline css as it has the highest priority.

Just do this:

<tr style="background-color:#000099"> 

Answer 3

Modify your html to this

<tr class="grayRow" > ... </tr> 
<tr > ... </tr>

and then just set your style in css file like this

tr{
    background-color: #fff; 
}

tr.grayRow{
    background-color: #ddd; 
}

It shout be worked.

If you will change style from your css file NEVER use !important; flag on element in your html. like this

<tr style="background-color:#000099 !important;"> 

Answer 4

I have check your alternative rows is added a class "k-alt" in <tr> with color #f5f5f5; Even you have <tr style="background-color:#000099 !important;"> , it will override by the class, because HTML parse out 1st then only insert the class "k-alt" by function. I suggest that you using jquery remove the "k-alt" or replace the "k-alt" background color by jquery.( I have see ur webpage have install Jquery Libary)

Replace the background

<script type="text/javascript">
$(function() {
  $(".k-alt").css("background","#000099");
});
</script>

Or Remove the background

<script type="text/javascript">
$(function() {
  if($("tr").hasClass('k-alt')){ 
      $("tr").removeClass('k-alt');
  }
});
</script>