Question

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

Answer 1

这样的东西？

Fiddle

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

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

}

Answer 2

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

两个表，重叠边框

2 个答案: