html - 从表中的每 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

添加一个简单示例的代码笔: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>