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

Question

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

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

顺便说一下，使用图像来显示日期并不是一个真正的选择。

Answer 1

在内容跨度中使用相对定位：

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

在 CSS 中：

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

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

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

尽管这可行，但我建议您使用图像。您可以将所有必需的日期嵌入到一个图像文件中（CSS 精灵技术），它可以让您更好地控制，减少特定于浏览器的问题。

Answer 2

嗯...如果我理解正确的话，我在每个单元格中的做法可能类似于以下内容：

<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>

当然，您可以将样式移动到单独的 css 文件中。您也许还可以取消容器 div 并仅应用“position:relative;”包含单元格的样式。这种方法的主要缺点是，如果没有一些棘手的解决方法，您将失去在 IE 中垂直对齐的能力。

Answer 3

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