html - 在 html 中，如何让表中表在视觉上看起来与没有内表一样

Question

如果我在表格中的一层有多个表格(即内部表格不会向右和向下移动)，我应该如何设置表格样式。

原图中只有一张 table ，这是我想要的样子

在第二个屏幕截图中，我现在有一个外部表格和其中的三个表格，我尝试将外部表格的样式设置为 border-collapse 以消除表格之间的垂直间隙和转移到所有三个表格的右侧，但它并没有像我想象的那样工作，它只是删除了表格中表格单元格之间的线条。 (表格宽度也设置为100%)

我怎样才能在外部表格中找到表格，但看起来像第一个屏幕截图。 (我需要表中的表，因为我正在编写一个 javascript 方法来隐藏内部表)。在第二张截图中有一个外表

所以html是这样的:

<table class="releasegroupingtable" >
<!--Linked-->
<tr><td><table class="releasegroupingcategory" >
......
</table></td></tr>

<!--Not Linked-->
<tr><td><table class="releasegroupingcategory" >
......
</table></td></tr>

<!--Discogs-->
<tr><td><table class="releasegroupingcategory" >
......
</table></td></tr>
</table>

和这样的CSS:

.releasegroupingtable {
    width:100%;
    border-collapse: collapse;
}

.releasegroupingcategory {
    width:100%;
    border-collapse: collapse;
}

Answer 1

从您提供的代码来看，在外表的 td 上似乎有一些填充。
您应该可以通过添加来修复它

.releasegroupingtable > tbody > tr > td
{
    padding: 0;
}

选择器链对于不选择 .releasegroupingcategory 中的 td 也是必要的。