<TD> 单元格不显示背景图像答案

【问题标题】：<TD> Cell not showing background images<TD> 单元格不显示背景图像
【发布时间】：2012-02-15 17:20:42
【问题描述】：

我有一个表格代码，其中包含三个单元格。我希望每个单元格都有不同的背景图像。但问题是，只有第一个单元格显示图像！请帮忙！我的代码：

我更改了#topbar td 宽度！

成功的代码：

#topbar {
        width: 100%;
        color: transparent;
        font-size: 13px;
        border-spacing: 0px;
        white-space: nowrap;
    }
    #topbar td {
        width: 8.33333%;
        margin: 0px;
        padding: 0px;
    }
    #topbar td {
        height: 15px;
        margin: 0px;
        background-color: transparent;
        white-space: nowrap;
        cursor: pointer;
    }
    #topbar td:hover {
        background-color: transparent;
    }
    #topbar td.selected {
        font-weight: bold;
        color: #FFFFF;
    }
    #topbar td.empty {
        cursor: auto;
    }
    #topbar td.empty:hover {
        background-color: #2d2d2d;
    }
    #topbar td span {
        display: image;
    }

旧代码在标题中

#topbar {
    width: 100%;
    color: transparent;
    font-size: 13px;
    border-spacing: 0px;
    white-space: nowrap;
}
#topbar td {
    width: 100%;
    margin: 0px;
    padding: 0px;
}
#topbar td {
    height: 15px;
    margin: 0px;
    background-color: transparent;
    white-space: nowrap;
    cursor: pointer;
}
#topbar td:hover {
    background-color: transparent;
}
#topbar td.selected {
    font-weight: bold;
    color: #FFFFF;
}
#topbar td.empty {
    cursor: auto;
}
#topbar td.empty:hover {
    background-color: #2d2d2d;
}
#topbar td span {
    display: image;
}

在体内：

<table id="topbar">
    <tr>
        <td class="box2d" style="background: url(http://osxcrash.webs.com/MacBarMain.PNG) no-repeat">
        <td class="box2d" style="background: url(http://osxcrash.webs.com/MacBar.PNG) no-repeat">
        <td class="box2d" style="background: url(http://osxcrash.webs.com/MacBar2.png) no-repeat">
    </tr>
</table>

【问题讨论】：

确保文件名和链接都是小写的
您显示的不是有效的 HTML - 您没有关闭表格单元格
display: image; 不是 CSS。 @Pekka td 的结束标签在 HTML 中是可选的。
我的文件名没有问题，即使其中一个文件名是大写的。显示：图像；什么都不做，所以我把它放在那里。最后，Pekka，我如何正确关闭单元格？因为所有的单元格都以相同的方式结束，只有第一个出现。
@PrplNinja no，tosho 是对的，关闭是可选的

标签： html html-table cell

【解决方案1】：

所有的图片都显示在那里，只是所有的都在彼此的顶部，所以你只能看到第一个。

不确定您希望它们如何显示，但将 display:block; 添加到 #topbar td 规则将阻止它们相互重叠

编辑：如果您希望在同一行显示它们，您需要为每个 TD 元素指定一个宽度值。当前设置的 100% 值占据了整个屏幕，因此遮挡了其他 TD 元素的视图

示例：http://jsfiddle.net/mZEWN/

【讨论】：

是的 width: 100% 是问题的根源。

【解决方案2】：

尝试关闭您的 TD 应答器：

<table id="topbar">
    <tr>
        <td class="box2d" style="background: url(http://osxcrash.webs.com/MacBarMain.PNG) no-repeat"/>
        <td class="box2d" style="background: url(http://osxcrash.webs.com/MacBar.PNG) no-repeat"/>
        <td class="box2d" style="background: url(http://osxcrash.webs.com/MacBar2.png) no-repeat" />
    </tr>
</table>

【讨论】：

<td>标签不能这样自闭