Загрузка другого компонента внутри таблицы неожиданно увеличивает ширину таблицы в Angular

Question

Я новичок в angular и пытаюсь создать приложение COVID-19 в angular, где я показываю данные в табличной форме. У меня есть два компонента, компонент состояния и компонент округа.

Компонент состояния перечисляет все состояния в таблице и когда я нажимаю на любое состояние. Это должно загрузить все районы, перечисленные ниже того государства. Но это увеличивает мою ширину моего столбца состояния компонента состояния, что приводит к неожиданной ширине таблицы.

Вот моя блиц-ссылка на стек: введите описание ссылки здесь

Вот моя ожидаемая ссылка на результат: Ожидаемый результат

Вот мой кусок кода

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 правил для вашей таблицы, например. Хотя это лоскутное одеяло, и вы должны попытаться избежать такого рода вещей, но сейчас вы можете использовать это, а затем go примеры стеков, где вы можете найти тонны примеров вложенных таблиц

table {
    table-layout: fixed;
}

table td {
    overflow: hidden;
}

component2. css

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

.district td{
width:150px;
}

Answer 2

Я не работал с angular, но после рассмотрения проблемы это выглядело как проблема со структурой таблицы HTML. Это то, что я сделал:

<tr>
    <td id="myTableData" app-district *ngIf="data[ 'show']" colspan="4"></td>
</tr>

Я добавил <td></td> как ребенок к вашему <tr></tr> и добавил свойство colspan="4", также перемещая вниз логики c до td так что новые строки таблицы (данные района) отображаются в формате «myTableData».

Вы можете прочитать об атрибуте colspan здесь .