Multi color TD in html/php?

I'm trying to find a way to make my td or table multi color.

echo "<table  padding=\"0\" spacing=\"0\" 
  style=\"background-color:yellow; width: 100%; margin-left: 2px; 
  width: 100%; line-height: 80% ;\">";
echo "<tr>";
echo "<td class=\"bgfiller\">
  <font style=\"color: black;  font-size:90%; \" >
   ".$rowbis['Lnaam']." - ".$rowbis['Type_name']."</font>
  </td></tr>";

My bgfiller style looks li开发者_Python百科ke this:

.bgfiller{
  width: 10px;
  background-color: red;
  z-index: 1 ; 
}

So what I'm trying to do is make a block that is yellow with a small block in it of 10px (will be set by a variable in a later state) and with some text over it.

So you will get something like a progress bar with text over it. But the text has to use the complete width of the table and just the 10px.

Anyone got a clue on how I could get this to work?

---

First of all, please eliminate the <font> tag. There's no reason for it when you can just add font-size: 90%; color: black; to your existing .bgfiller rule.

But to answer your question, I'd suggest something like this:

<div style="width: 200px; border: 1px solid black; position: relative;">
    Hello There I am Text
    <div style="width: 30px; background: yellow; position: absolute; left: 0; top: 0; z-index: -1;">&nbsp;</div>
</div>

See: http://jsfiddle.net/knWuf/

---

Something like this is much cleaner but what exactly are you trying to do with the text?

Demo: http://jsfiddle.net/WVvLD/

<div><span>Progress</span><div>

div {
    background-color: yellow;
}
span {
    background-color: red;
    display:block;
    width: 10px;
}

---

If you want to keep working with tables, this may be a solution:

<table width="100%">
 <tr>
        <td><span></span>this is an text</td>     
 </tr>
</table>

and the style

td{
background-color:green;
    width:100%;
    position:relative;
    z-index:-2;
}
td span{
    position:absolute;
    width:20px;
    height:20px;
    background-color:darkred;
    z-index:-1;
}

http://jsfiddle.net/WVvLD/34/