你怎么能在HTML / CSS / JS中实现类似Excel 2007的数据库？

Question

我想要做的是生成以下的HTML / CSS / JS版本。网格线和其他方面并不重要。如何进行背景数据库更是一个问题。

_{（来源：tech-recipes.com）}

Answer 1

将条形图作为背景图像并将它们定位以显示值。例如。固定列宽为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>

如果您的列必须是灵活的大小（不是固定的，并且在页面生成时不知道），这有点棘手：

<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%;">&nbsp;</div>
    <div class="value">5</div>
</div>
<div class="cell">
    <div class="back" style="width: 80%;">&nbsp;</div>
    <div class="value">8</div>
</div>

Answer 2

像cross-browser gradient这样的基于javascript的解决方案可能是个不错的开始。

使用某些DHTML，您可以制作bar with a given length。

Answer 3

我会使用来自Ext JS库的网格组件或DataTable组件Yahoo的YUI库。跨浏览器兼容性等工作已经完成。