This should be a very simple css, yet cant get my head around it.
All i need is to create DataBars representing percentages inside <td> elements.
here is what i did. and this is fine except that the databar <div> size and position properties corresponding to the <table> parent rather then <td> parent

HTML Code:
<table style='position:absolute;width:10&#37;;top:150px;  height:20px;table-layout:fixed; left: 85px;border:1px solid black;'>
<tr style="border:1px solid black;"> 
     <td></td>
         <td></td>
        <td >  </td>
        </tr>
   <tr style="border:1px solid black;"> 
     <td></td>
         <td></td>
        <td >   
                <div class="databar" style="position: absolute; height: 90%; width: 60%; border: thin solid aqua;background:yellow; left: 2px;top:0px;"></div>  <!-- this is a visual representation of the percentage -->
                <div style="position:absolute;left:30%;width:40%;border:1px solid green;height:100%;top:0px; text-align:center;"> 323</div> <!-- this is a numeric value -->
         </td>
        
    </tr>
</table>
cannot see what i did wrong.