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

My goal is to make an HTML page that is similar to a "photo frame". In other words, I want to make a blank page that is surrounded by 4 pictures.

我的目标是制作一个类似于“相框”的HTML页面。换句话说，我想做一个空白的页面，里面有4张图片。

This is my code:

这是我的代码:

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

And the CSS classes are the following:

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

My problem is that I am getting thin white lines between the cells of the table, I mean that the border of pictures is not continuous. How can I avoid these white spaces?

我的问题是，我在表格的单元格之间得到了细白线，我的意思是图片的边界不是连续的。如何避免这些空白?

6 个解决方案

#1

138

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

And in css:

在css中:

table {border: none;}

EDIT: As iGEL noted, this solution is officially deprecated (still works though), so if you are starting from scratch, you should go with the jnpcl's border-collapse solution.

编辑:正如iGEL所指出的，这个解决方案已经被正式弃用(尽管仍然有效)，所以如果您从头开始，您应该使用jnpcl的边界-折叠解决方案。

I actually quite dislike this change so far (don't work with tables that often). It makes some tasks bit more complicated. E.g. when you want to include two different borders in same place (visually), while one being TOP for one row, and second being BOTTOM for other row. They will collapse (= only one of them will be shown). Then you have to study how is border's "priority" calculated and what border styles are "stronger" (double vs. solid etc.).

到目前为止，我非常不喜欢这种变化(不经常使用表格)。它使一些任务更加复杂。例如，当你想要在同一个地方包括两个不同的边界(视觉上)，而一个在一行上，另一个在另一行上。它们将会崩溃。然后你必须研究如何计算边界的“优先级”，以及什么边界样式“更强”(双边界和固体边界等等)。

I did like this:

我确实是这样的:

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

Now, with border collapse, this won't work as there is always one border removed. I have to do it in some other way (there are more solutions ofc). One possibility is using CSS3 with box-shadow:

现在，随着边界坍塌，这将不起作用，因为总是有一个边界被移走。我必须用另一种方式来做(ofc有更多的解)。一种可能性是使用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>

You could also use something like "groove|ridge|inset|outset" border style with just a single border. But for me, this is not optimal, because I can't control both colors.

您也可以使用类似“groove|ridge|inset| start”的边框样式，只有一个边框。但对我来说，这不是最优的，因为我不能控制两种颜色。

Maybe there is some simple and nice solution for collapsing borders, but I haven't seen it yet and I honestly haven't spent much time on it. Maybe someone here will be able to show me/us ;)

也许有一些简单而好的方法可以解决边界的折叠问题，但是我还没有看到它，老实说，我也没有花太多时间在它上面。也许有人可以带我/我们去;

#2

table {
    border-collapse: collapse;
}

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

#3

In a bootstrap environment none of the top answers helped, but applying the following removed all borders:

在bootstrap环境中，上面的答案都不起作用，但应用以下方法可以消除所有边界:

.noBorder {
    border:none !important;
}

Applied as:

应用:

<td class="noBorder">

#4

For me I needed to do something like this to completely remove the borders from the table and all cells. This does not require modifying the HTML at all, which was helpful in my case.

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

table, tr, td {
    border: none;
}

#5

In a bootstrap environment here is my solution:

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

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

#6

This is what resolved the problem for me:

这就解决了我的问题:

In your HTML tr tag, add this:

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

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

That removed all the borders that were showing on the table row.

它删除了表行的所有边框。

#1

138

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