css table gets wrong properties

I have built a table which on of it's row is like so

<tr id="graphid+'" class="graphRow">
                 <td colspan="2" style="width:5%; max-width:5%;">
                     <div class="stockData">
                         <div class="stockDatatable">
                             <table class="stocktable">
                                 <tr><td id="stockDBnameid+'"></td></tr>
                                 <tr><td class="Desctitle">???? ?????:</td></tr>
                                 <tr><td id="stockDBfieldid+'" class="stocktable"></td></tr>
                                 <tr><td id="stockDBurlid+'" class="stocktable">????? ??? ?????</td></tr>
                                 <tr><td class="Desctitle">??? ?????:</td></tr>
                                 <tr><td id="stockDBvalueid+'" class="stocktable">??? ?????</td></tr>
                                 <tr><td id="stockDBdescid+'" class="stocktable">????? ??????</td></tr>
                             </table>
                         </div>
                     </div>
                 </td>
                 <td colspan="8">
                     <table>
                         <tr>
                             <td>
                                 <div id="graphDivid+'" class="GraphDiv"></div>
                             </td>
                         </tr>
                     </table>
                 </td>
             </tr>
 

as you can see, The row has two coloumns.
I'm talking about the second one:
it's compiled from a div->div->table->rows..
the rows get their properties from the the class = "graphRow" and NOT from class ="stockTable".
The css is like so:

tr.graphRow td {background:lightgray;}
 tr.stocktable td {background:blue;}
 

why is isn't working?

thanks.

---