in der Tabelle von jedem 2n Elemente Grenzabstand entfernen

Question

Ich habe eine Tabelle, die wie folgt aussieht:

Und hat jede Zeile ein verstecktes Details Feld:

Also ich möchte den Randabstand von der Zeile und ihrer Detailzeile entfernen. Wie kann ich das tun?

das ist mein 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> 

und das ist mein 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; 
      } 
     } 
    } 
} 

Wie kann ich dieses Problem beheben? Ich habe versucht, einen oberen Rand zu machen, aber nichts ist passiert ... Was sind andere Lösungen für mein Problem?

UPDATE 1

eines einfachen Beispiels codepen ergänzt: https://codepen.io/anon/pen/prxgOe

UPDATE 2

Ich möchte Abstand zwischen Titel und Details tr nur Elemente entfernen!

Answer 1

Hier ist eine schnelle Lösung mit Grenzen.

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

* ngFor hat eine Option zu erkennen, gerade und ungerade Zeilen:

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

dann können Sie eine gerade oder ungerade Werte verwenden Stil/Klasse zu setzen, wie so:

<div [class.evenClass]="event" [class.oddClass]="odd">...</div> 

und definieren Sie im Stylesheet .evenClass und .oddClass s tyle nach Bedarf.

PSYou haben eine Tabelle Layout, müssen Sie oben auf Ihren Fall anpassen

Answer 3

Ich glaube, Sie wollen wie diese

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 4

@hunzaboy und @ankitapatel Antworten Art waren gut für mich, aber schließlich kam ich mit einer anderen Lösung, die wahrscheinlich nicht die beste ist, aber es funktioniert wie ein Charme ... Es bricht nicht die ui Skalierbarkeit oder etwas anderes ...

So einfach habe ich div Elemente in jedem td-Elemente so jetzt meine HTML wie folgt aussieht:

<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> 

und dann habe ich diese SCSS meiner Datei:

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