Question

我在表的Angular网站上添加了该表，该表的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

有几件事...

下面的表是country_name的子表，因此对于它外面的表，我们模仿.mat-expansion-panel
但是padding:0 24px也有向下箭头，因此我们必须将右侧的填充增加8px
接下来，我们将底部表格的中心（在mat扩展内）进行文本对齐，以使效果相似
我还在mat-expansion-indicator上加上了红色边框，以便您可以看到此内容

角材料：垫扩展内的表未与其他表对齐

1 个答案: