Balken und Zahlen in einer Tabellenzelle übereinander

Versuche gerade das hier:
jsfiddle

Man sieht die kleinen Balken in der Zelle.
Nur bekomme ich es nicht hin, dass die Zahl "67,40" und due Balken übereinander sind.
Also momentan bekomme ich die Balken unter die Zahl.
Habs mit position und z-index versucht. Aber im schlimmsten fall hatte ich mir damit alles "zerschossen" -.-

Geplant war es so:html-seminar.de/woltlab/attachment/419/
Die Stelle mit der <td>:

<td class="td_wpn_list" title="column: KHSr % (Percent from Average: 294,75%)">

                    67,40
                    <div style="height:5px;background:#6FA0C2;width:23%;"></div>
                    <div style="height:5px;background:#905F3D;width:67%;"></div>




                </td>

Ist das in ner Tabelle möglich?

margin-top:-10px; Funktioniert =)
Aber ich raff das nicht.

Das hier funktioniert bei mir nicht:

white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

und warum gibt es bei einem <div> immer einen Zeilenumbruch?
Wenn ich das so schreibe klingt das noob, aber ich raff das echt nicht

Edit: http://www.webdesign-in.de/mts/unterschied-div-und-span/

Zitat

Ein Inlineelement darf keine Blockelemente enthalten aber andere Inlineelemente.

Ich denke mal damit hatte ich in der Vergangenheit die meisten Probleme -.-

EDIT2:

hier mal mein testobjekt: http://jsfiddle.net/LbqM4/7/
Ich bekomms einfach nicht hin, dass die balken und die zahl auf der gleichen ebene/line liegen.