如何从HTML表格中完全删除边框

我的目标是制作一个类似于“相框”的HTML页面。换句话说，我要制作一个空白页面，周围有4张图片。

这是我的代码：

<table>
    <tr>
        <td class="bTop" colspan="3">
        </td>
    </tr>
    <tr>
        <td class="bLeft">
        </td>
        <td class="middle">
        </td>
        <td class="bRight">
        </td>
    </tr>
    <tr>
        <td class="bBottom" colspan="3">
        </td>
    </tr>                                                    
</table>

CSS类如下：

.bTop
{
    width: 960px;
    height: 111px;
    background-image: url('../Images/BackTop.jpg');
}
.bLeft
{
    width: 212px;
    height: 280px;
    background-image: url('../Images/BackLeft.jpg');    

}

.middle
{
    width: 536px;
    height: 280px;
}

.bRight
{
    width: 212px;
    height: 280px;
    background-image: url('../Images/BackRight.jpg');    
}

.bBottom
{        
    width: 960px;
    height: 111px;
    background-image: url('../Images/BackBottom.jpg');       
}

我的问题是，表格的单元格之间出现细白线，这意味着图片的边界不连续。如何避免这些空白？

<table cellspacing="0" cellpadding="0">

并在CSS中：

table {border: none;}

编辑： 正如iGEL所述，此解决方案已正式弃用（尽管仍然可以使用），因此，如果从头开始，则应使用jnpcl的边界折叠解决方案。

到目前为止，我实际上非常不喜欢这种更改（不要经常使用表）。这使某些任务更加复杂。例如，当您想在同一位置（视觉上）包含两个不同的边框时，一个是一行的顶部，另一个是另一行的底部。它们将折叠（=仅显示其中之一）。然后，您必须研究如何计算边框的“优先级”以及什么样的边框样式“更强”（双对比实线等）。

我确实是这样的：

<table cellspacing="0" cellpadding="0">
  <tr>
    <td class="first">first row</td>
  </tr>
  <tr>
    <td class="second">second row</td>
  </tr>
</table>

----------

.first {border-bottom:1px solid #EEE;}
.second {border-top:1px solid #CCC;}

现在，如果边框崩溃，则将无法正常工作，因为始终会删除一个边框。我必须以其他方式进行（有更多的c解决方案）。一种可能是将CSS3与box-shadow结合使用：

<table class="tab">
  <tr>
    <td class="first">first row</td>
  </tr>
  <tr>
    <td class="second">second row</td>
  </tr>
</table>​​​

<style>
.tab {border-collapse:collapse;}
.tab .first {border-bottom:1px solid #EEE;}
.tab .second {border-top:1px solid #CCC;box-shadow: inset 0 1px 0 #CCC;}​
</style>

您也可以使用仅带有单个边框的类似“槽|脊|插入|起始”边框样式的东西。但是对我来说，这不是最佳选择，因为我无法控制两种颜色。

也许有一些简单而不错的解决方案来解决边界崩溃的问题，但是我还没有看到它，老实说我还没有花太多时间。也许这里有人可以告诉我/我们;）

table {
    border-collapse: collapse;
}

对我来说，我需要执行以下操作以完全删除表格和所有单元格的边框。这根本不需要修改HTML，这对我来说很有帮助。

table, tr, td {
    border: none;
}

在引导环境中，最重要的答案都无济于事，但应用以下内容将消除所有边界：

.noBorder {
    border:none !important;
}

应用于：

<td class="noBorder">

在引导环境中，这是我的解决方案：

    <table style="border-collapse: collapse; border: none;">
        <tr style="border: none;">
            <td style="border: none;">
            </td>
        </tr>
    </table>    

这就是为我解决问题的原因：

在您的HTML tr标签中，添加以下内容：

style="border-collapse: collapse; border: none;"

这删除了表格行上显示的所有边框。