【问题标题】：How to completely remove borders from HTML table如何从 HTML 表格中完全删除边框
【发布时间】：2011-08-06 17:59:02
【问题描述】：

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

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

【问题讨论】：

标签： html css html-table background-image

【解决方案1】：

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

在 css 中：

table {border: none;}

编辑： 正如 iGEL 所指出的，此解决方案已被正式弃用（尽管仍然有效），因此如果您从头开始，您应该使用 jnpcl 的边框折叠解决方案。

到目前为止，我实际上非常不喜欢这种变化（不要经常使用表格）。它使一些任务变得更加复杂。例如。当您想在同一位置（视觉上）包含两个不同的边框时，一个是 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;}

现在，随着边框折叠，这将不起作用，因为总是移除一个边框。我必须以其他方式来做（有更多的解决方案）。一种可能性是使用带有 box-shadow 的 CSS3：

<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”的边框样式，只有一个边框。但对我来说，这不是最佳选择，因为我无法控制两种颜色。

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

【讨论】：

cellspacing & cellpadding 自 1999 年以来已被弃用，请参阅 developer.mozilla.org/en-US/docs/HTML/Element/table - 您应该使用 @jnpcl 解决方案。
iGEL 是对的，我已经编辑了我的答案。老实说，我很惊讶，它被弃用了这么长时间，而我仍在使用它而没有任何问题:)

【解决方案2】：

table {
    border-collapse: collapse;
}

【讨论】：

【解决方案3】：

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

table, tr, td {
    border: none;
}

【讨论】：

尝试了所有的建议直到这里，最后border: none 应用到td 说服了jekyll 制作一个无边框的表格：<td markdown="span" style="padding: 0.5vw; border: none; max-width:100%; max-height:10%; background: transparent;">

【解决方案4】：

在引导环境中，最重要的答案都没有帮助，但应用以下内容删除了所有边框：

.noBorder {
    border:none !important;
}

申请为：

<td class="noBorder">

【讨论】：

这个建议在 Wordpress 中对我有用。我很难让边界不被强制执行。

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

这就是为我解决问题的方法：

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

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

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

【讨论】：

【解决方案7】：

使用 TinyMCE 编辑器，我能够删除所有边框的唯一方法是使用 border:hidden 的样式，如下所示：

<style>
table, tr {border:hidden;}
td, th {border:hidden;}
</style>

在 HTML 中是这样的：

<table style="border:hidden;"</table>

干杯

【讨论】：

【解决方案8】：

在您的全局 CSS 中使用这种 Css 样式

.table,
.monthview-datetable td,
.monthview-datetable th {
  border: none !important;
}

【讨论】：

【解决方案9】：

table {
   border: none;
}

您可以使用这个 css 属性来隐藏表格边框。

【讨论】：

【解决方案10】：

给定：

    <table>
            <tr>
                <th>Company</th>
                <th>Contact</th>
                <th>Country</th>
            </tr>
    <table>

在你的 CSS 上使用它会起作用：

tr { 
    border: transparent 1px solid; 
   }

【讨论】：

【解决方案11】：

我发现border-spacing 是我的问题

 td, th, tr, table {
    border: 0 !important;
    border-spacing:0 !important;
  }

【讨论】：