如何完全去除 HTML 表格的边框

Question

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

我的问题是表格的单元格之间出现细白线，我的意思是图片的边框不连续。我怎样才能避免这些空白？

原文由 yazanpro 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

<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;}

现在，随着边框折叠，这将不起作用，因为总是有一个边框被移除。我必须以其他方式来做（有更多的解决方案）。一种可能性是将 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>

您也可以使用类似“groove|ridge|inset|outset”的边框样式，只有一个边框。但对我来说，这不是最佳选择，因为我无法控制两种颜色。

也许有一些简单而不错的折叠边界解决方案，但我还没有看到它，老实说我也没有花太多时间在上面。也许这里有人可以向我/我们展示 ;)

原文由 Damb 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

table {
    border-collapse: collapse;
}

原文由 drudge 发布，翻译遵循 CC BY-SA 4.0 许可协议