Remove border spacing from every 2n element in table - html

Question

I have a table that looks like this:
And every row has a hidden details field:
So I want to remove border spacing from row and its details row.. How can I do that?
this is my 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>
and this is my SCSS:
.messages {
background-color: $color-background-main;
min-height: 17rem;
overflow-x: auto;
padding-top: 2rem;
.message-table {
border-collapse: separate;
border-spacing: 0 0.4rem;
thead {
th {
border: none;
font-size: 0.6rem;
color: #9b9b9b;
text-transform: uppercase;
padding-top: 0;
padding-bottom: 0;
&:first-child {
width: 70%;
padding-left: 1rem;
}
}
}
}
tbody {
tr {
box-shadow: $main-shadow;
background-color: white;
&.selected {
box-shadow: $shadow-selected;
}
td:first-child {
padding-left: 1rem;
}
}
td {
background-color: white;
border: none;
padding-top: 0;
padding-bottom: 0;
padding-right: 0;
height: 2.5rem;
vertical-align: middle;
table-layout: fixed;
&:first-child {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
&:last-child {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
padding-right: 0;
width: 2rem;
}
}
}
}
How can I fix this? I've tried making tr a top border but nothing happened... What are other solutions for my problem?
UPDATE 1
Adding codepen of a simple example : https://codepen.io/anon/pen/prxgOe
UPDATE 2
I want to remove spacing between title and details tr elements ONLY!

Answer 1

Here is a quick fix using borders.
table {
border-collapse: collapse;
border-spacing: 0 0.4rem;
}
tr {
background-color: #ccc;
}
.title {
border-top: 5px solid #fff;
}
.details {
/* display: none; */
}
<table>
<thead>
<tr>
<th>Title</th>
<th>Created</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr class="title">
<td>title1</td>
<td>2017-01-01</td>
<td>More</td>
</tr>
<tr class="details">
<td>this is text1</td>
<td colspan="2"></td>
</tr>
<tr class="title">
<td>title2</td>
<td>2017-01-01</td>
<td>More</td>
</tr>
<tr class="details">
<td>this is text2</td>
<td colspan="2"></td>
</tr>
<tr class="title">
<td>title3</td>
<td>2017-01-01</td>
<td>More</td>
</tr>
<tr class="details">
<td>this is text3</td>
<td colspan="2"></td>
</tr>
</tbody>
</table>

Answer 2

I think you want like this
table {
border-collapse: collapse;
border-spacing: 0 0.4rem;
}
tr {
background-color: #ccc;
display: table-row;
}
table {
border-collapse: collapse;
border-spacing: 0 0.4rem;
}
tr {
background-color: #ccc;
display: table-row;
}
.title:first-child {
border-top: 7px solid #fff;
}
.title {
border-top: 12px solid #fff;
}
tbody tr:nth-child(2n) {
position: relative;
}
tbody tr:nth-child(2n)::after {
bottom: 0;
box-shadow: 0 2px 2px 0 #ebebeb;
content: "";
height: 100%;
left: 0;
position: absolute;
right: 0;
width: 100%;
}
<table>
<thead>
<tr>
<th>Title</th>
<th>Created</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr class="title">
<td>title1</td>
<td>2017-01-01</td>
<td>More</td>
</tr>
<tr class="details">
<td>this is text1</td>
<td colspan="2"></td>
</tr>
<tr class="title">
<td>title2</td>
<td>2017-01-01</td>
<td>More</td>
</tr>
<tr class="details">
<td>this is text2</td>
<td colspan="2"></td>
</tr>
<tr class="title">
<td>title3</td>
<td>2017-01-01</td>
<td>More</td>
</tr>
<tr class="details">
<td>this is text3</td>
<td colspan="2"></td>
</tr>
</tbody>
</table>

Answer 3

*ngFor has an option to detect odd and even rows:
<div *ngFor="let message of messages; let odd=odd; let even=even>..</div>
then you can use odd or even values to set style/class as so:
<div [class.evenClass]="event" [class.oddClass]="odd">...</div>
and in the stylesheet, define .evenClass and .oddClass style as needed.
P.S.You have a table layout, you need to adapt above to your case

Answer 4

#hunzaboy and #ankitapatel answers were kind of good for me, but eventually I came with different solution which is probably not the best one, but it works like a charm... It does not break the ui scalability or anything else...
So I just added div elements in each of td elements so my HTML now looks like this:
<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>
and then I added this SCSS to my file:
#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%;
}
}