Question

我正在尝试创建一个带有装饰边框的表格，其中间的内容。所以我创建了一个3x3表，其中包含所有外部单元格中的图像和中间单元格中的内容。代码如下所示：

        <table cellpadding="0" cellspacing="0" border="0" width="60%">
    <tr>
        <td style="background:url(box_topleft.png);background-repeat:no-repeat transparent;width: 45px; height: 125px"></td>
        <td style="background:url(box_topmiddle.png);repeat-x; height: 125px"></td>
        <td style="background:url(box_topright.png);background-repeat:no-repeat transparent;width: 45px; height: 125px"></td>
    </tr>
    <tr>
        <td style="background-image:url(box_middleleft.png);background-repeat:repeat-y;width: 45px;"></td>
        <td style="background-color:white">text</td>
        <td style="background-image:url(box_middleright.png);background-repeat:repeat-y;width: 45px;"></td>
    </tr>
    <tr>
        <td style="background:url(box_bottomleft.png);background-repeat:no-repeat transparent;width: 45px; height: 125px"></td>
        <td style="background:url(box_bottommiddle.png);repeat-x; height: 125px"></td>
        <td style="background:url(box_bottomright.png);background-repeat:no-repeat transparent;width: 45px; height: 125px"></td>
    </tr>
    </table>

在白色的身体背景上，一切都排成一列，看起来很棒。但是当身体有另一种颜色背景或背景图像时，背景颜色会在细胞之间偷看。

一个更简单的例子，给定蓝色背景，下面的例子应该只是一个白色矩形：

<table cellpadding="0" cellspacing="0" border="0" width="60%">
<tr>
    <td style="background-color:blue; width:10px; height:100px"></td>
    <td style="background-color:blue; height: 100px">text</td>
    <td style="background-color:blue; width:10px; height:100px"></td>
</tr>
</table>

但是浏览器在TD之间显示蓝线。

这种情况发生在Chrome中，部分发生在Firefox中，而在IE中根本不存在。单元格填充和间距已经为零，因此我不知道为什么Chrome中的单元格之间可以看到任何背景。还有什么我需要做的吗？

我还添加了以下内容但没有成功：

table {
    border-collapse: collapse;
}

table, th, td {
    border: 0px;
}

感谢。任何帮助表示赞赏。

背景显示通过表格单元格

0 个答案: