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

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

现在，随着边框折叠，这将不起作用，因为总会移除一个边框.我必须以其他方式来做(有更多的解决方案).一种可能性是将 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屋！