两个表，重叠的边界答案

【问题标题】：Two Tables, Overlapping Borders两个表，重叠的边界
【发布时间】：2014-02-14 15:50:18
【问题描述】：

好的，所以我设置了两张桌子，一张在另一张外面。为了使其正确显示，我不得不将内表放在标签内。问题是，我希望内表在顶部、左侧和右侧完全重叠外部表的边框。在这里，看看这个 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 页面上！

【问题讨论】：

标签： html css border overlap

【解决方案1】：

这样的？

Fiddle

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

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

}

【讨论】：

这绝对是我得到的最接近的。我可能可以完成这项工作，但这并不是我想要的。不过，对此的唯一更改是让 header2 上的边框再次可见，在主体边框的顶部。

【解决方案2】：

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

【讨论】：