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

我该如何解决这个问题？我已经尝试过制作顶部边框但没有发生任何事情......我的问题的其他解决方案是什么？

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

Answer 2

我想你想要这样

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可以选择检测奇数行和偶数行：

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

然后您可以使用奇数或偶数值来设置样式/类：

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

并在样式表中根据需要定义.evenClass和.oddClass样式。

P.S.你有一个表格布局，你需要在上面适应你的情况

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

从表中的每个2n元素中删除边框间距

4 个答案: