角材料：垫子扩展内的桌子与其他桌子不对齐

Question

我已将表格添加到 Angular 网站，该表格列未对齐，有人知道如何正确执行此操作吗？ 谢谢

<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

有几件事...

• 下面的桌子是.mat-expansion-panel一个孩子，所以对于它外面的桌子，我们模仿padding:0 24px
• 但是还有一个用于mat-expansion-indicator的向下箭头，所以我们必须将右侧的填充增加 8px
• 接下来，我们将底部表格（在垫子扩展内部）的文本对齐居中，以便效果相似
• 我还在<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}

在这里完成工作堆栈闪电战