Horizontal bar chart as background table 1

[MustangPriMe]

I'm trying to include a horizontal bar chart as a background to an HTML table so that the data appears on top of it.

This is what I have:

<table width="1000" border="0" cellspacing="0" cellpadding="0">
 <tr>
    <td style="text-align:left;width:160px;padding:0px;">
      <div style="width:1000px;position:absolute;float:left;z-index:-14001;height:16px;background-color:#FFFFEE;">
        <div style="width:720px;float:left;z-index:-1;height:16px;background-color:#B4E5CE;position:absolute;">&nbsp;</div>
      &nbsp;</div>
      <div style="overflow:hidden;max-height:16px;">Row name here </div>
    </td>
    <td>1.00</td>
    <td>135</td>
    <td>88.5</td>
    <td>0</td>
    <td>0.5</td>
    <td>8.5</td>
    <td>97.5</td>
    <td>65</td>
    <td>72%</td>
  </tr>
</table>

..with the bar chart in this example linked to the final column.

This works OK, but has two major drawbacks...
1) It doesn't work at all in Firefox.
2) It's flakey for printing - often the data will not print.

Can anyone provide a fix OR a better solution?

Thanks
Paul

 

[Vragabond]

I must admit I have no idea what it is you want to do. Why could you not achieve the same with much simpler techniques.

It does not work in FF because your divs have a negative z-index. Since the canvas (html element) has a z-index of 0, it covers whatever you are showing there.

I am not sure what you mean with printing but usually the backgrounds will not print by default. Other than that, absolute positioning is often hard to print.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[MustangPriMe]

Got it. It was the negative z-index as you said. Also cured the IE printing problem.

To explain what I was attempting in a different way, I'm trying to give each row of a table of data a variable width coloured bar, the width of the bar representing a percentage from a given column on that row of the table. 100% would be full width of the table, 33% a third of the full width etc. The data should appear on top of these coloured bars.

For anyone interested, the working HTML/CSS is:
(And if anyone has a better/simpler way of doing this, I'd be interested)

<style type="text/css">
<!--
div {
	position: absolute;
}
-->
</style>
<table width="1000" border="0" cellspacing="0" cellpadding="0">	  
  <tr>
    <td width="190">
      <div style="width:1000px;height:16px;background-color:#FFFFEE;"></div>
      <div style="width:720px;height:16px;background-color:#B4E5CE;"></div>
      <div style="overflow:hidden;">Row name here</div>
    </td>
    <td width="90"><div>1.00</div></td>
    <td width="90"><div>135</div></td>
    <td width="90"><div>88.5</div></td>
    <td width="90"><div>0</div></td>
    <td width="90"><div>0.5</div></td>
    <td width="90"><div>8.5</div></td>
    <td width="90"><div>97.5</div></td>
    <td width="90"><div>65</div></td>
    <td width="90"><div>72%</div></td>
  </tr>
</table>