javascript - 在表内加载另一个组件会意外地在Angular中扩展我的表宽度

Question

我是angular的新手，正在尝试制作angular的COVID-19应用程序，以表格形式显示数据。我有两个部分，状态部分和地区部分。

当我单击任何状态时，状态组件会列出表中的所有状态。它应加载该州下方列出的所有地区。但是它正在扩展我的状态组件的状态列的宽度，这导致了表的意外宽度。

这是我的堆栈闪电链接:enter link description here

这是我的预期结果链接:Expected result

这是我的代码

State.component.html

<table>
    <tbody *ngFor="let data of statewisedata;let i=index ">
        <span class="dropdown rotateDownRight ">
            <svg xmlns="http://www.w3.org/2000/svg " width="24 " height="24 " viewBox="0 0 24 24 " fill="none " stroke="currentColor " stroke-width="2 " stroke-linecap="round " stroke-linejoin="round">
                <polyline points="6 9 12 15 18 9 "></polyline>
            </svg>
        </span>

        <tr class="state ">
            <td (click)="OngetState(data.state); showHideData(data) " style="font-weight: 600; ">{{data.state}}</td>
            <td style="color: inherit; ">
                <span *ngIf='DailystateStatus[i]?.confirmed !==0 || DailystateStatus[i]?.confirmed < 0 ;' class="deltas " style="color: rgb(255, 7, 58); ">
                    <svg xmlns="http://www.w3.org/2000/svg " width="24 " height="24 " viewBox="0 0 24 24" fill="none " stroke="currentColor " stroke-width="2 " stroke-linecap="round " stroke-linejoin="round ">
                        <line x1="12 " y1="19 " x2="12 " y2="5 "></line>
                        <polyline points="5 12 12 5 19 12 "></polyline>
                    </svg>    
                    {{DailystateStatus[i]?.confirmed}}
                 </span> 
                 {{data.confirmed}}
             </td>

             <td style="color: inherit; ">{{data.active}}</td>
             <td style="color: inherit; ">{{data.recovered}}</td>
             <td style="color: inherit; ">{{data.deaths}}</td>
         </tr>

         <tr app-district *ngIf="data[ 'show'] "></tr>   //here loading list 
    </tbody>
</table>

District.component.html

<tr *ngFor="let data of districtdata|keyvalue" class="district" style="background: rgb(248, 249, 250);">

    <td style="font-weight: 600;"> {{data.key}}</td>
    <td><span class="deltas" style="color: rgb(255, 7, 58);"></span>{{data.value.confirmed}}</td>

</tr>

District.component.ts

@Component({
  selector: '[app-district]',
  templateUrl: './district.component.html',
  styleUrls: ['./district.component.css']
})

如果我尝试将我的区组件包装在div中而不是tr中，并且如果我尝试增加该div的宽度，则会增加我在状态组件中的状态列的宽度

<div *ngFor="let data of districtdata|keyvalue" class="district" style="width:500px">

    <td style="font-weight: 600;"> {{data.key}}</td>
    <td><span class="deltas" style="color: rgb(255, 7, 58);"></span>{{data.value.confirmed}}</td>

</div>

Answer 1

因此，您可以做的是为表添加一些CSS规则，例如。尽管这是拼凑而成的，您应该尝试避免这种事情，但是现在您可以使用它，然后转到stackblitz示例，在其中可以找到大量嵌套表示例

table {
    table-layout: fixed;
}

table td {
    overflow: hidden;
}

component2.css

.district {
    width: 300px;
    display: table;
    margin-left: 25px;
}

.district td{
width:150px;
}