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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (156)

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

我的问题是,我在表格的单元格之间变得细细的白线,我的意思是图片的边界不连续。我怎样才能避免这些空白?

提问于
用户回答回答于

这样:

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

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

也可以只用一个边框来使用“凹凸”的边框样式。但对我而言,这并不是最佳的,因为我无法控制这两种颜色。

用户回答回答于
table {
    border-collapse: collapse;
}

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

扫码关注云+社区

领取腾讯云代金券