两张桌子，重叠的边框

好的，所以我有两个桌子，一个在另一个之外。为了使其正确显示，我必须将内部表格放在标记中。问题是，我想让内表完全重叠上，左，右外表的边界。在这里，看这个的jsfiddle：两张桌子，重叠的边框

HTML：

<body> 
    <table class="main-body round"> 
    <tr><td class="nopad"> 
     <table class="header round"> 
      <tr> 
       <td class="header">Test Text 1</td> 
      </tr> 
      <tr> 
       <td class="header2">This is a longer test text two.</td> 
      </tr> 
     </table> 
     </td></tr> 
     <tr> 
      <td>Line 1</td> 
     </tr> 
     <tr> 
      <td>Line 2</td> 
     </tr> 
     <tr> 
      <td>Line 3</td> 
     </tr> 
     <tr> 
      <td>Line 4</td> 
     </tr> 
    </table> 
</body>

CSS：

body table.round 
{ 
    border:2px solid; 
    border-radius:25px; 
} 

.main-body td.header 
{ 
    text-align:left; 
    padding-left:50px; 
    color:white; 
    font-size:50px; 
} 

.main-body td.header2 
{ 
    text-align:right; 
    padding-right:30px; 
    color:white; 
    font-size:30px; 
} 

.nopad 
{ 
    border-spacing: 0px; 
    padding: 0px; 
} 

table.header 
{ 
    background-color:#151515; 
    width:100%; 
} 

.main-body 
{ 
    border-spacing: 0px; 
    border-collapse: separate; 
    color: #202020; 
    margin-left: auto; 
    margin-right: auto; 
    width: 600px; 
    background-color: #d2ffdc; 
    box-shadow: 10px 10px 10px #101010; 
} 

#navi 
{ 

}

可以看到，在左上角和右上角，有点的绿色出现在两张桌子的边界之间。我不仅希望它消失，我希望这两个边界在顶部，左侧和右侧基本上成为一个边界，它们如此重叠。就像我要复制粘贴这两个表一样，并且它们的宽度完全相同。我试过边框间距，我试过没有填充，没有边距，改变边框的大小。没有任何东西让我接近我想成为的地方。

这甚至可能吗？或者我必须解决与没有边界的内部表格重叠的外观？

在附注中，为什么JSFiddle链接需要随附的代码？代码在JSF页面上！

来源

2014-02-14 Malkierian

这样的事情？

Fiddle

table, tr, td{ 
    border-collapse: collapse; 
} 

table.header2 
{ 
    background-color:#151515; 
    width:100%; 
    border-radius:20px; 
    padding: 0; 
    margin: 0; 

}

来源

2014-02-14 05:26:53 JunM

这绝对是关于我已经得到最接近的一次。我大概可以完成这项工作，但这不完全是我的目标。但是，唯一的变化就是在header2上的边框再次显示在主体边框的顶部。 – Malkierian

.nopad { 
    border-spacing: 0; 
    display: table-cell; 
    padding: 2px; 
}

来源

2014-02-14 07:50:18 user3302090

两张桌子，重叠的边框

回答

相关问题