Question

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

此时我唯一能想到的是将日期和单元格内容放在彼此浮动的单独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

我意识到你说使用图像“不是IMHO的选择”，但我可以建议使用图像可以让你在日期的外观上有更多的灵活性。您可以使用图像编辑器可用的任何字体，而不是可以在浏览器中使用的有限字体集。可以使用各种图像调整技巧，这在浏览器中是不可能的。

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

3 个答案: