如何完全删除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');       
}

我的问题是，我在表格的单元格之间得到了细小的白线，我的意思是，图片的边界不是连续的。我怎样才能避免这些白线呢？

Brian Tompsett - 汤莱恩
已编辑的问题 7日 十一月 2017 в 10:07
编程
html css html-table background-image
16日 四月 2011 в 2:39
6 种观点
解决办法
<table cellspacing="0" cellpadding="0">

而在css中。

table {border: none;}

编辑： 正如iGEL所指出的，这个方案已经被官方废弃了（不过仍然有效），所以如果你是从头开始，你应该使用jnpcl'的border-collapse方案。

到目前为止，我其实很不喜欢这种变化（不经常使用表格）。它使一些任务变得更加复杂。例如，当你想在同一个地方（视觉上）包含两个不同的边框，而其中一行在顶部，另一行在底部时。它们将被折叠（=只有一个会被显示）。那么你就必须研究如何计算边框的优先级，以及什么边框样式更强（双层与实心等等）。

我喜欢这样做。

<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的盒状阴影。

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


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

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

也许有一些简单而好的解决方案来折叠边框，但我还没有看到，而且说实话，我也没有花很多时间去研究。也许这里有人能告诉我/我们；)

Damb
编辑本段答案25日 十一月 2012 в 9:31
评论(2)
 
table {
    border-collapse: collapse;
}
Aruna Herath
编辑本段答案6日 十月 2018 в 3:46
评论(0)

对我来说，我需要做这样的事情来完全去除表格和所有单元格的边框。这完全不需要修改HTML，这对我来说很有帮助。

table, tr, td {
    border: none;
}
评论(1)