Angular material：table 内部垫扩展未与其他 table 对齐

Question

我为 table 添加到 Angular 网站，table col 没有对齐，有人知道如何正确地做到这一点吗？ 谢谢

<div class="table-responsive ">
            <table class="table" style="width: 100%">
              <thead>
              <tr>
                <th scope="col" width="50">ID</th>
                <th scope="col" width="300">Book Name</th>
                <th scope="col" width="250">Total Book</th>
                <th scope="col" width="250">Date</th>
                <th scope="col" width="250">Remarks</th>
                <th scope="col" width="250">Booking Date</th>
                <th scope="col" width="250">Booking Status</th>
              </tr>
              </thead>
            </table>
          </div>

          <mat-accordion>
            <mat-expansion-panel (opened)="panelOpenState = true; openContent(order)"
                                 (closed)="panelOpenState = false">
              <mat-expansion-panel-header [collapsedHeight]="customCollapsedHeight"
                                          [expandedHeight]="customExpandedHeight">
                <table class="table ">
                  <tbody>
                  <tr>
                    <td class="tb-td-txt" width="50">12</td>
                    <td class="tb-td-txt" width="300">ABC</td>
                    <td class="tb-td-txt" width="250">100}</td>
                    <td class="tb-td-txt" width="250">10-11-2018</td>
                    <td class="tb-td-txt" width="250">Jhone Doe</td>
                    <td class="tb-td-txt" width="250">10-05-2019</td>
                    <td class="tb-td-txt" width="250">Completed</td>
                         </tr>
                  </tbody>
                </table>
              </mat-expansion-panel-header>
          </mat-accordion>

Answer 1

有几件事...

• 下面的table是.mat-expansion-panel的child，所以对于外面的table，我们模仿padding:0 24px
• 但是 mat-expansion-indicator 也有一个向下箭头，所以我们必须将右侧的填充增加 8px
• 接下来，我们text-align中心为底部table（也就是里面的mat-expansion）这样效果就差不多了
• 我还在 <td> 上加了红色边框，这样你就可以看到

相关CSS:

th, td{border:1px solid red;}
.table-responsive>.table{padding:0 32px 0 24px;}
mat-expansion-panel-header .table td{text-align: center}

完成working stackblitz here