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

我的问题是我在桌子的细胞之间得到了细白线,我的意思是图片的边界不连续.我怎样才能避免这些空白？

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

您也可以使用"凹槽|嵌入|嵌入|开始"边框样式,只有一个边框.但对我来说,这不是最佳选择,因为我无法控制这两种颜色.

也许有一些简单而好的解决方案可以折叠边框,但我还没有看到它,老实说我没有花太多时间在它上面.也许有人在这里可以告诉我/我们;)

Answer 2

table {
    border-collapse: collapse;
}

Answer 3

对我来说,我需要做这样的事情来彻底删除表格和所有单元格的边框.这根本不需要修改HTML,这对我的情况很有帮助.

table, tr, td {
    border: none;
}

Answer 4

在引导环境中,没有一个顶级答案有帮助,但应用以下内容删除了所有边框:

.noBorder {
    border:none !important;
}

应用为:

<td class="noBorder">

Answer 5

除了 之外，这里的所有答案在 2022 年都不起作用（至少对于 Chrome 而言）<table cellspacing="0" cellpadding="0">。然而我需要一种 CSS 解决方案，而不是 HTML 解决方案。所以这里是：

table,
thead,
tbody,
tfoot,
tr,
th,
td {
    padding: 0;
    border-spacing: 0;
}

paddingCSS 是 HTML 的同义词cellpadding，border-spacing分别是cellspacing. 但这并不是一件很明显的事情。

Answer 6

在引导环境中,这是我的解决方案:

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

Answer 7

这就是为我解决问题的原因：

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

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

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

Answer 8

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

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

在 HTML 中是这样的：

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

干杯