如何从HTML表中完全删除边框 [英] How to completely remove borders from HTML table

问题描述

我的目标是让HTML网页类似于「相框」。换句话说，我想创建一个由4张图片包围的空白页。

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.

这是我的代码：

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

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

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?

推荐答案

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

并在css中：

table {border: none;}

strong>
正如iGEL所指出的，这个解决方案被正式弃用了（仍然有效），所以如果你从头开始，你应该使用jnpcl的边框崩溃解决方案。

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.

我实际上很不喜欢这个变化到目前为止（不经常使用表）。它使一些任务更复杂。例如。当您想在同一位置（视觉上）包括两个不同的边框，而一个是一行的TOP，第二个是其他行的BOTTOM。他们会崩溃（=只会显示其中一个）。然后你必须学习如何计算边界的优先级和什么边框样式更强（双对固体等）。

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

我这样做了：

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

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:

<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边境。但对我来说，这不是最优的，因为我不能控制两种颜色。

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.

也许有一些简单和漂亮的解决方案，折叠边界，但我还没有看到它，我真的没有花很多时间。也许在这里的人可以显示我/我们;）

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

这篇关于如何从HTML表中完全删除边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！