好的，所以我设置了两张 table ，一张在另一张外面。为了使其正确显示，我不得不将内表放在标签中。问题是，我希望内部表格在顶部、左侧和右侧完全重叠外部表格的边框。在这里，看看这个 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 页面上!
最佳答案
是这样的吗？
table, tr, td{
border-collapse: collapse;
}
table.header2
{
background-color:#151515;
width:100%;
border-radius:20px;
padding: 0;
margin: 0;
}
关于html - 两张表，重叠的边框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21771346/