從每2n個元素表

Question

刪除邊框間距我有一個表，看起來像這樣：

而且每行都有一個隱藏的細節場：

所以我想要從行和其詳細信息行中刪除邊界間距..我該怎麼做？

這是我的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> 

，這是我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; 
      } 
     } 
    } 
} 

我該如何解決這個問題？我已經嘗試讓tr成爲頂級邊界，但沒有發生任何事......對於我的問題，有什麼其他解決方案？

更新1

加入codepen一個簡單的例子：https://codepen.io/anon/pen/prxgOe

更新2

我想標題和細節之間移除間隔僅限TR元素！

Answer 1

以下是使用邊框的快速修復。

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有一個選項，以檢測奇數和偶數行：

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

那麼你可以使用奇數或偶數值設置樣式/類像這樣：

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

並在樣式表中定義.evenClass和.oddClass s tyle根據需要。

PSYou有一個表的佈局，則需要上述適應你的情況

Answer 3

我想你想這樣

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

，然後我加入這個SCSS到我的文件：

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