Is there anyway, within a table, to overlap 2 or more TD cells? Though yes, I know, illogical... I have my reasons. I wrote a simple html-based progress bar which takes the width of 150px (table) and adds a border, then uses an embedded table that colors in (up to 150px, depending on a variable taken from a Database) with a different color, depending on the progress. I want to be able to put text at the center of the 150px, at the front. (and on the same full line as the progress 'bar' itself) What would be the quickest way to do it? I am using tables, and not div's.. incase if that changes anything. I wasn't sure if z-index would be the way to go, or if I should do something else.. The Basic idea of what I have so far, is: (mind you, I put in 15px just to give you an idea instead of using a variable like I do) <table cellpadding="0" cellspacing="0"> <tr><td width="150px" height="7px" style="border: 1px solid #666666;"> <table align="left" cellpadding="0" cellspacing="0"> <tr><td align="left" bgcolor="#990000" height="7px" width="75px"> </td></tr> </table> </td></tr> </table> Code (markup): How would I add text ontop of the bar TD cell and centered to 150px. I cannot put text in the TD range there because it is centered to the width, and not the table itself. I know its not the most elaborate code ever, but I am hoping to get it to work.
This is what I have so far, and its getting there... I have a white block under and on the side of my td. is this even close? <table cellpadding="0" cellspacing="0"> <tr><td> <table border="0" align="left" cellpadding="0" cellspacing="0"> <tr> <td align="left" style="position:absolute;" height="12px" bgcolor="#990000" width="150px"></td> <td style="position:absolute; border: 2px solid #666666;" width="150px" align="center"><font style="color:#ffffff; font-size: 8pt;">Some Progress...</font></td> </tr> </table> </td></tr> </table> Code (markup):