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


141

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

我的问题是,表格的单元格之间出现细白线,这意味着图片的边界不连续。如何避免这些空白?

Answers:


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

现在,如果边框崩溃,则将无法正常工作,因为始终会删除一个边框。我必须以其他方式进行(有更多的c解决方案)。一种可能是将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>

您也可以使用仅带有单个边框的类似“槽|脊|插入|起始”边框样式的东西。但是对我来说,这不是最佳选择,因为我无法控制两种颜色。

也许有一些简单而不错的解决方案来解决边界崩溃的问题,但是我还没有看到它,老实说我还没有花太多时间。也许这里有人可以告诉我/我们;)


7
自1999年以来,不推荐使用cellpacing 和cellpadding,请参阅developer.mozilla.org/zh-CN/docs/HTML/Element/table-您应该使用@jnpcl解决方案。
iGEL 2012年

iGEL是正确的,我已经编辑了答案。老实说,我很惊讶,它已经被弃用了这么长时间,而且我仍在使用它,没有任何问题:)
Damb 2012年


19

对我来说,我需要执行以下操作以完全删除表格和所有单元格的边框。这根本不需要修改HTML,这对我来说很有帮助。

table, tr, td {
    border: none;
}

3
尝试了到这里的所有建议,最后border: none使td说服的杰基尔做出了无边桌:<td markdown="span" style="padding: 0.5vw; border: none; max-width:100%; max-height:10%; background: transparent;">
Avio,

16

在引导环境中,最重要的答案都无济于事,但应用以下内容将消除所有边界:

.noBorder {
    border:none !important;
}

应用于:

<td class="noBorder">

1
这个建议在Wordpress中对我有用。我很难使边界都没有得到执行。
robbpriestley

7

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

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

4

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

在您的HTML tr标签中,添加以下内容:

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

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.