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

我的目标是制作一个类似于“相框”的HTML页面。换句话说，我想制作一张被4张图片包围的空白页。如何从HTML表中完全删除边框

这是我的代码：

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

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

来源

2011-04-16 yazanpro

126

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

而且在CSS：

table {border: none;}

编辑： 作为伊格尔指出，该解决方案已正式弃用（仍然工作虽然），所以如果你是从头开始，你应该去jnpcl的border-collapse解决方案。

我其实很不喜欢这种变化（不适用于经常使用的表格）。它使一些任务有点复杂。例如。当你想在同一个地方（视觉上）包含两个不同的边框时，其中一个是一行的TOP，另一个是其他行的BOTTOM。他们会崩溃（=只显示其中一个）。那么你必须研究边界的“优先级”是如何计算的，边界样式是“更强”（双重还是实体等）。

我不喜欢这样的：现在

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

您也可以使用类似“槽|脊|插图|开始”边框样式，只是一个单一的边界。但对我而言，这并不是最佳选择，因为我无法控制这两种颜色。

也许对于折叠边界有一些简单而好的解决方案，但我还没有看到它，而且我也没有花太多时间在它上面。也许有人在这里将能够向我/我们;）

来源

2011-04-16 02:43:28 Damb

CELLSPACING＆CELLPADDING已被弃用，看到https://developer.mozilla.org/en-US/docs/HTML/Element/table - 你应该使用@jnpcl解决方案。 – iGEL 2012-09-06 08:50:10

iGEL是对的，我编辑了我的答案。老实说，我很惊讶，它已经被弃用了很长一段时间，我仍然在使用它，没有任何问题:) – Damb 2012-11-25 21:32:53

table { 
    border-collapse: collapse; 
} 

/* remove padding */ 
td, th { 
    padding: 0; 
}

来源

2011-04-16 03:16:29 drudge

为什么要删除填充？对我而言，它也可以不删除它。 – LinusGeffarth 2017-11-28 13:55:00

@LinusGeffarth当时有必要，但那是六年前。 :) – drudge 2017-12-04 06:45:27

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

table, tr, td { 
    border: none; 
}

来源

2016-05-06 15:17:31

在引导环境没有顶答案的帮助，但应用下面的删除了所有边界：

.noBorder { 
    border:none !important; 
}

应用为：

<td class="noBorder">

来源

2016-07-20 08:03:37 Stephan

我认为你的意思是'border：none！important'（注意我删除了！和重要之间的空格） – 2016-10-27 07:38:01

这个建议在Wordpress中适用于我。我无法执行边界任务。 – robbpriestley 2016-12-13 16:42:23

这是解决问题的me：

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

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

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

来源

2017-02-08 09:07:30 Khozanai

在这里引导环境是我的解决方案：自1999年以来

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

来源

2017-08-24 08:38:21 Han

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

回答

相关问题