Remove border spacing from every 2n element in table

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!



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>

*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

I think you want like this

@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%;
    }
}