How could you implement something like Excel 2007 Data Sheets in HTML / CSS / JS?
What I would like to do is create the following HTML / CSS / JS version. Grid lines and other aspects are not important. This is a question about how to do background databases.
alt text http://blogs.tech-recipes.com/shamanstears/files/2008/04/excel_databars2.png
+1
source to share
3 answers
Make bars as background images and place them to display values. eg. with a fixed column width of 100px:
<div style="background: url(bg.gif) -50px 0 no-repeat;">5</div>
<div style="background: url(bg.gif) -20px 0 no-repeat;">8</div>
If your columns need to be flexible (not fixed and unknown at the time of page creation), this is a little more complicated:
<style type="text/css">
.cell { position: relative; }
.cell .back { position: absolute; z-index: 1; background: url(bg.gif); }
.cell .value { position: relative; z-index: 2; }
</style>
<div class="cell">
<div class="back" style="width: 50%;"> </div>
<div class="value">5</div>
</div>
<div class="cell">
<div class="back" style="width: 80%;"> </div>
<div class="value">8</div>
</div>
+1
source to share
A javascript based solution like cross browser gradient might be a good start.
With some DHTML you can make a bar with a given length .
0
source to share