Html 删除表中每个2n元素的边框间距

我有一张这样的桌子：

每行都有一个隐藏的详细信息字段：

所以我想从行及其详细信息行中删除边框间距。。我该怎么做

这是我的HTML：

<table class="table message-table">
    <thead>
        <tr>
            <th>Title</th>
            <th>Date</th>
            <th>Action</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <ng-container *ngFor="let message of messages | paginate: config">
            <tr>
                <td>{{message.title}}</td>
                <td>{{message.created | date:'longDate'}}</td>
                <td (click)="message.collapsed = !message.collapsed; makeMessageSeen(message);" [attr.aria-expanded]="!message.collapsed" aria-controls="collapseExample">{{message.collapsed ? 'More' : 'Less'}}</td>
                <td></td>
            </tr>
            <tr id="collapseExample" [ngbCollapse]="message.collapsed">
                <td>{{message.text}}</td>
                <td colspan="3"></td>
            </tr>
        </ng-container>
    </tbody>
</table>

我怎样才能解决这个问题？我试着让tr成为顶部边界，但什么都没发生。。。我的问题还有什么其他解决方案

更新1

添加一个简单示例的codepen：

更新2

---

我只想删除标题和细节元素之间的间距

这里有一个使用边框的快速修复方法

表格{
边界塌陷：塌陷；
边界间距：0.4雷姆；
}
tr{
背景色：#ccc；
}
.头衔{
边框顶部：5px实心#fff；
}
.详情{
/*显示：无*/
}

标题
创建
行动
标题1
2017-01-01
更多
这是文本1
标题2
2017-01-01
更多
这是文本2
标题3
2017-01-01
更多
这是文本3

这里有一个使用边框的快速修复方法

表格{
边界塌陷：塌陷；
边界间距：0.4雷姆；
}
tr{
背景色：#ccc；
}
.头衔{
边框顶部：5px实心#fff；
}
.详情{
/*显示：无*/
}

标题
创建
行动
标题1
2017-01-01
更多
这是文本1
标题2
2017-01-01
更多
这是文本2
标题3
2017-01-01
更多
这是文本3

*ngFor具有检测奇偶行的选项：

<div *ngFor="let message of messages; let odd=odd; let even=even>..</div>

---

*ngFor有一个检测奇偶行的选项：

<div *ngFor="let message of messages; let odd=odd; let even=even>..</div>

我想你想要这样


表格{
边界塌陷：塌陷；
边界间距：0.4雷姆；
}
tr{
背景色：#ccc；
显示：表格行；
}
桌子{
边界塌陷：塌陷；
边界间距：0.4雷姆；
}
tr{
背景色：#ccc；
显示：表格行；
}
.头衔：第一个孩子{
边框顶部：7px实心#fff；
}
.头衔{
边框顶部：12px实心#fff；
}
t车身tr:n第n个子（2n）{
位置：相对位置；
}
t车身tr:n第n个子（2n）：：之后{
底部：0；
盒影：0 2px 2px 0#ebebebeb；
内容：“；
身高：100%；
左：0；
位置：绝对位置；
右：0；
宽度：100%；
}

标题
创建
行动
标题1
2017-01-01
更多
这是文本1
标题2
2017-01-01
更多
这是文本2
标题3
2017-01-01
更多
这是文本3
我想你想要这样


表格{
边界塌陷：塌陷；
边界间距：0.4雷姆；
}
tr{
背景色：#ccc；
显示：表格行；
}
桌子{
边界塌陷：塌陷；
边界间距：0.4雷姆；
}
tr{
背景色：#ccc；
显示：表格行；
}
.头衔：第一个孩子{
边框顶部：7px实心#fff；
}
.头衔{
边框顶部：12px实心#fff；
}
t车身tr:n第n个子（2n）{
位置：相对位置；
}
t车身tr:n第n个子（2n）：：之后{
底部：0；
盒影：0 2px 2px 0#ebebebeb；
内容：“；
身高：100%；
左：0；
位置：绝对位置；
右：0；
宽度：100%；
}

标题
创建
行动
标题1
2017-01-01
更多
这是文本1
标题2
2017-01-01
更多
这是文本2
标题3
2017-01-01
更多
这是文本3
@hunzaboy和@ankitapatel的答案对我来说有点好，但最终我提出了不同的解决方案，这可能不是最好的解决方案，但效果很好。。。它不会破坏ui的可伸缩性或其他任何功能

所以我只是在每个td元素中添加了div元素，所以我的HTML现在看起来如下所示：

<tbody>
    <ng-container *ngFor="let message of messages | paginate: config">
        <tr>
            <td [class.unseen]="!message.seen" [class.seen]="message.seen">{{message.title}}</td>
            <td [class.unseen]="!message.seen" [class.seen]="message.seen">{{message.created | date:'longDate'}}</td>
            <td class="details-button" (click)="message.collapsed = !message.collapsed; makeMessageSeen(message);" [attr.aria-expanded]="!message.collapsed" aria-controls="collapseExample">{{message.collapsed ? 'More' : 'Less'}}</td>
            <td></td>
        </tr>
        <tr id="collapseExample" [ngbCollapse]="message.collapsed">
            <td>             
                <div class="text-container">{{message.text}}</div>
            </td>
            <td colspan="3">    
                <div class="empty-container"></div>
            </td>
        </tr>
    </ng-container>
</tbody>

@hunzaboy和@ankitapatel的答案对我来说有点好，但最终我提出了不同的解决方案，这可能不是最好的解决方案，但它就像一个魅力。。。它不会破坏ui的可伸缩性或其他任何功能

所以我只是在每个td元素中添加了div元素，所以我的HTML现在看起来如下所示：

<tbody>
    <ng-container *ngFor="let message of messages | paginate: config">
        <tr>
            <td [class.unseen]="!message.seen" [class.seen]="message.seen">{{message.title}}</td>
            <td [class.unseen]="!message.seen" [class.seen]="message.seen">{{message.created | date:'longDate'}}</td>
            <td class="details-button" (click)="message.collapsed = !message.collapsed; makeMessageSeen(message);" [attr.aria-expanded]="!message.collapsed" aria-controls="collapseExample">{{message.collapsed ? 'More' : 'Less'}}</td>
            <td></td>
        </tr>
        <tr id="collapseExample" [ngbCollapse]="message.collapsed">
            <td>             
                <div class="text-container">{{message.text}}</div>
            </td>
            <td colspan="3">    
                <div class="empty-container"></div>
            </td>
        </tr>
    </ng-container>
</tbody>

你们可以给标题和描述行分类。然后你可以很容易地控制它们，比如.title.description。如果你创建了一个工作代码笔，那么我们可能会更好地帮助你。你能给我一把小提琴吗？@hunzaboy添加了一个代码笔example@DmitriyLishtvan添加了一个codepen@hunzaboy是否要删除间距？我没听错吧？如果是，写：表{border collapse:collapse；border space:0；}您可以为标题和描述行指定类。然后你可以很容易地控制它们，比如.title.description。如果你创建了一个工作代码笔，那么我们可能会更好地帮助你。你能给我一把小提琴吗？@hunzaboy添加了一个代码笔example@DmitriyLishtvan添加了一个codepen@hunzaboy是否要删除间距？我没听错吧？如果是，写：table{border collapse:collapse；border space:0；}是的，这是一个很好的方法，但是在我的设计中，一行有一个方框阴影，所以当我喜欢你的时候就会发生这种情况：你能把css添加到代码笔中，这样我就可以用它进行实验吗：）是的，这是一个很好的方法，但是在我的设计中，一行有一个方框阴影，所以，当我像你所展示的那样做的时候，就会发生这样的情况：你能把你的css添加到代码笔中，这样我就可以用它进行实验吗：）正如前面的答案，你的答案有问题。因为我的原始设计有框阴影，所以当我像你提供的那样进行间隔时，我会遇到这个问题不，我不能，但这里有一个添加阴影的代码笔，你想要边框和框阴影两者….？不确定是否可行，但请告诉我们。正如前面的回答，你的答案有问题。自从我最初的des
#collapseExample {
    td {
        padding: 0;
    }

    .text-container {
        background-color: #fff;
        margin-top: -23px;
        padding-left: 1rem;
        border-radius: 0.2rem;
        height: 100%;
        padding-bottom: 1rem;
    }

    .empty-container {
        background-color: #fff;
        height: 100%;
        margin-top: -20px;
        width: 100%;
    }
}