带有单元格背景文本的HTML表格

在每个单元格的背景中显示包含文本的html表格的最佳方式是什么？我正在制作日历，我希望在实际文本的背景中有灰色日期

在这一点上，我唯一能想到的是将日期和单元格内容放在单独的div中，这些div彼此浮动，但即使在表中也不能很好地实现

---

顺便说一句，使用图像显示日期实际上不是一个选项。。。如果我理解正确，我可能会在每个单元格中执行以下操作：

<div class="cell_container" style="position:relative;">
    <div class="cell_bg" style="position:absolute; width:100%; 
        height:100%; z-index:0; color: gray;">29/12/2009</div>
    <div class="cell_fg" style="position:absolute; width:100%; 
        height:100%; z-index:1;">Jim's birthday</div>
</div>

29/12/2009
吉姆的生日

---

当然，您可以将样式移动到单独的css文件中。您还可以去掉container div，只对包含的单元格应用“position:relative；”样式。这种方法的主要缺点是，如果没有一些巧妙的解决方法，您将失去在IE中垂直对齐的能力。

我知道您说过使用图像“不是一个选项”，但我建议使用图像可以在日期外观上给您更大的灵活性。您可以使用图像编辑器可用的任何字体，而不是浏览器中可依赖的有限字体集。并且可以使用浏览器中不可能使用的各种图像调整技巧。

在内容范围中使用相对定位：

<tr>
    <td>
        <span class="day">6</span>
        <span class="contents">Contents go here</span>
    </td>
</tr>

现在跨距重叠，内容超过了天数。您可能想调整位置，但这应该可以

---

即使这样做可行，我还是建议您使用图像。您可以在一个图像文件中嵌入所有必需的日期（CSS sprite技术），这样您就可以更好地控制浏览器特定的问题。

如果背景有文本，您可能不希望任何前景文本掩盖背景文本，对吗？不，背景文本只是一个日期，它的颜色会稍有不同，而且会明显变大，因此它仍然可以被解读，并且可以通过表格是日历这一事实推断出来。如果内容跨越两行会发生什么？啊，我把它们混在一起了，我知道你现在做了什么。啊，妈的，这是我一直在尝试的，但由于jquery，它无法工作。。。argh（顺便说一句，prepend和append对表数据的内容不起作用）唯一的问题是，它留下了大量的底部填充添加负数

边距底部

。很好，日期不是完整日期，只是在一个月的某一天-我会给它一个重击-看起来不错是的，我想是的，但我不确定，所以我只是把今天的日期放进去：）我用的是一张真正的桌子，所以有了这张桌子，div可以飞到任何想去的地方。。。（因为position:relative）-它通常忽略表结构。您是否尝试应用position:relative相对于元素？Ja，没有div-它仍然不尊重表结构。对于container div，它至少保持在表的边界内，但行被弄乱了。

span.day {
    line-height: 20px; /* just to give it a height */
    display: block;
    color: #aaa;
}

span.contents {
    position: relative;
    top: -20px;
}