[RESOLVED] <div> in <td> element

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

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

Code:

---

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

---

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

:wave:

Quote:

---

Originally Posted by 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

Code:

---

<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 :D

Quote:

---

Originally Posted by wiss.dev

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

---

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

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

Quote:

---

Originally Posted by wiss.dev

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

:wave:

EDIT:

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

HTML 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>​

---

css Code:

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

:wave:

Thanks Akhileshbc,, i already worked it out :)