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

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

已邀请:

6 个回复

物崎巩

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

并在CSS中：

table {border: none;}

编辑：正如iGEL所述，此解决方案已正式弃用（尽管仍然可以使用），因此，如果从头开始，则应使用jnpcl的border-collapse解决方案。到目前为止，我实际上非常不喜欢这种更改（不要经常使用表）。这使某些任务更加复杂。例如。当您想在同一位置（视觉上）包含两个不同的边框时，其中一个是第一行的顶部，第二个是另一行的底部。它们将折叠（=仅显示其中之一）。然后，您必须研究如何计算border的“ priority”，以及什么样的border样式为“ stronger”（双精度与实心等）。我确实是这样的：

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

您也可以使用带有单个边框的\“ groove | ridge | inset | outset \”边框样式。但是对我来说，这不是最佳选择，因为我无法控制两种颜色。也许有一些简单而不错的解决方案来解决边界崩溃的问题，但是我还没有看到它，老实说我还没有花很多时间。也许这里有人可以告诉我/我们;）

掏得透垦滩

table {
    border-collapse: collapse;
}

款去芳尾脊

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

table, tr, td {
    border: none;
}

温拎凯玛

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

.noBorder {
    border:none !important;
}

应用于：

<td class=\"noBorder\">

距相镭

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

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

babsoft

这就是为我解决问题的原因：在您的HTML tr标签中，添加以下内容：

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

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

要回复问题请先登录或注册

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

6 个回复

发起人

background_image

html

css

html_table

问题状态

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

与内容相关的链接

6 个回复

发起人

background_image

html

css

html_table

问题状态