[RESOLVED] <div> in <td> element

[wiss.dev]

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

<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.

[wiss.dev]

ok here is what i found, TD position should not be set to absolute. a work around for me was to wrapp the 2 div in another div container

 <td style="position:relative;text-align:center;">   
                     <div style="position:absolute;text-align:center;border:1px solid grey;width:100&#37;;height:100%;top:0px;left:0px;">
                        <div class="databar" style="position: absolute; height: 90%; width: 60%; border: thin solid aqua;background:yellow; left: 2px;top:0px;"></div>
                        <div style="position:absolute;left:30%;width:40%;border:1px solid green;height:80%;top:2px; text-align:center; vertical-align: middle;"> 323</div>
                    </div>                
               </td>

[akhileshbc]

Can you please post a visual example(a screenshot) of what you are having now and what you are expecting.

[wiss.dev]

ok here is what i found, TD position should not be set to absolute. a work around for me was to wrapp the 2 div in another div container

 <td style="position:relative;text-align:center;">   
                     <div style="position:absolute;text-align:center;border:1px solid grey;width:100%;height:100%;top:0px;left:0px;">
                        <div class="databar" style="position: absolute; height: 90%; width: 60%; border: thin solid aqua;background:yellow; left: 2px;top:0px;"></div>
                        <div style="position:absolute;left:30%;width:40%;border:1px solid green;height:80%;top:2px; text-align:center; vertical-align: middle;"> 323</div>
                    </div>                
               </td>

this was it, i wrapped the 2 divs in another div container

[akhileshbc]

this was it, i wrapped the 2 divs in another div container

You mean like this : http://jsfiddle.net/Ha3Cw/ ?

[wiss.dev]

yes, i just did some more css cosmetics and got it exactly like excel bars

[akhileshbc]

yes, i just did some more css cosmetics and got it exactly like excel bars

OK. So you were looking for something like this ?


http://i.techrepublic.com.com/blogs/765.jpg

It would have been a lot more better if you had given a visual sample as not everyone would be aware of what an Excel Bar is.

Here's what I have coded to have the above effect: http://jsfiddle.net/kLmPj/



EDIT:

If you do not wish to see it in action by visiting the above link, then here's the code:

<table id="my_excel">
  <thead>
      <tr>
          <th width="50&#37;">Name</th><th>Marks</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td>ABC1</td>
          <td>
              <span class="bar" style="width:75%;">75</span>
          </td>
      </tr>
      <tr>
          <td>ABC2</td>
          <td>
              <span class="bar" style="width:50%;">50</span>
          </td>
      </tr>
      <tr>
          <td>ABC3</td>
          <td>
              <span class="bar" style="width:13%;">13</span>
          </td>
      </tr>
  </tbody>
</table>​

#my_excel{
    width: 150px;
}
#my_excel td{
    border: 1px solid black;
    position: relative;
}
.bar{
    position: absolute;
    left: 0;
    top: 0;
    background-color: lightBlue;
}​

[wiss.dev]

Thanks Akhileshbc,, i already worked it out