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

100

yazanpro

我的目标是制作一个类似于“相框”的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>

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。