1

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

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
bubakazouba
  • 1,633
  • 2
  • 22
  • 34
  • Not sure what you mean by "But I don't want to do this, I will have different background colors of rows." -- Do you mean, you **want** alternating row colours, but you want **different** alternating row colours to what you have now? – Ming Apr 24 '14 at 02:31
  • Your answer maybe here: Can I override inline !important? http://stackoverflow.com/a/11151859/2388392 – etoxin Apr 24 '14 at 02:32
  • 1
    @setek no, I don't mean alternating row colours, I mean changing the row color depending on the information in the row,I'm doing this in the php. so each will have its own background-color attribute – bubakazouba Apr 24 '14 at 02:52
  • @etoxin no my answer wasn't there, I've already seen this quesiton when I was searching about it. – bubakazouba Apr 24 '14 at 02:53
  • @user74670 so each row will its own color depending on information it has ? scrip based you mean ? – ProllyGeek Apr 24 '14 at 02:53
  • Could you apply a class to it instead of applying a `style=""` attribute? Then you could just do `tr.thiscolor td { background-color: #f00; }` with `` – Ming Apr 24 '14 at 02:53
  • The question itself should contain enough code to reproduce the problem. This one doesn’t, since it does not even show any code that needs to be overridden. – Jukka K. Korpela Apr 24 '14 at 05:15

4 Answers4

3

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

Just do this:

<tr style="background-color:#000099">
Amit Joki
  • 58,320
  • 7
  • 77
  • 95
  • inline CSS does not have the highest priority. It has the highest *specificity*. It can be overridden by `!important` elsewhere, which has a higher priority within the *cascade*. – Alohci Apr 24 '14 at 06:48
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");});

enter image description here

this is how it looks

ProllyGeek
  • 15,517
  • 9
  • 53
  • 72
  • I will try this so you want me to .k-grid td.Jan{ color-background:yellow; } and right? – bubakazouba Apr 24 '14 at 02:56
  • Jan is the session, I will have several of them,each one with a diff background color – bubakazouba Apr 24 '14 at 02:59
  • @user74670 one do it via javascript ? or css ? – ProllyGeek Apr 24 '14 at 03:01
  • @user74670 just open this file :kindo.common.min.css , go to line 9 , and add the color you want to your td. – ProllyGeek Apr 24 '14 at 03:05
  • if you want to do it via a script , which prolly you wanna do , because no one gonna fill inline style for all these rules , then just do via jquery: $('.k-grid td').css("background-color","red") // or whatever color your prefer. – ProllyGeek Apr 24 '14 at 03:08
  • if you want to assign single color for each row , then just do it also via jquery , $('.k-grid td').each(function(){$(this).css("background-color","red")//or whatever color you prefer}) , make sure you do this after document loads. – ProllyGeek Apr 24 '14 at 03:09
  • I did this: it didn't work :'( – bubakazouba Apr 24 '14 at 03:20
  • oh wait, $(document).ready(function(){$('.k-grid td').css("background-color","#000099");}); this is working now but what i want to do is this: $('.k-grid td.Jan') but that didn't work – bubakazouba Apr 24 '14 at 03:29
  • there is nothing called Jan would you please tell me what is jan ? is it a class ? – ProllyGeek Apr 24 '14 at 03:43
  • @user74670 do you mean the td with text jan within ? – ProllyGeek Apr 24 '14 at 03:45
  • if you mean that you want to color all cells with Jan text inside , you should do this , $(document).ready(function(){$(".k-grid td:contains('Jan')").css("background-color","#000099");}); – ProllyGeek Apr 24 '14 at 03:50
  • looks like it works, thanks alot for your help, i will try this as soon as i have access to a computer, but i wanted to know why didnt my code work? when i made a class and called it Jan? – bubakazouba Apr 24 '14 at 04:15
  • because your css selector was wrong if you wanna select class jan , just do it via .jan{} , glad to help you , please select as correct answer if it helps. – ProllyGeek Apr 24 '14 at 04:33
  • it works, but when I click on the header of the column it sorts and it cancels all the colors :D – bubakazouba Apr 24 '14 at 05:31
  • you can add same function inside the sorting function then. – ProllyGeek Apr 24 '14 at 05:32
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/51317/discussion-between-user74670-and-prollygeek) – bubakazouba Apr 24 '14 at 05:47
1

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;">
franki3xe
  • 330
  • 1
  • 2
  • 17
0

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>
Cheong BC
  • 306
  • 1
  • 7
  • the removing worked but it doesn't add the css – bubakazouba Apr 24 '14 at 03:35
  • you want all the "Jan" row change the background to #000099?, I found that you row not have the class name call Jan. – Cheong BC Apr 24 '14 at 03:52
  • Is that you want this code `$("tr:contains('Jan')").css("background-color",'#000099');` ? – Cheong BC Apr 24 '14 at 04:07
  • i will try the last code u gave me as soon as i have access to a pc. – bubakazouba Apr 24 '14 at 04:11