angular 6 bootstrap как установить ширину таблицы td в шаблоне компонента

Question

Я работаю с Angular 6.

У меня есть следующий экран

Этот экран состоит из двух элементов.HTML.В этом HTML у меня есть таблица, а после в компоненте, у меня есть td

<div class="table-responsive-md">
  <table class="table table-lg table-bordered table-striped">
    <tr>
        <th style="width: 30%"></th>
        <th style="width: 30%">Name</th>
        <th style="width: 30%">Count Prices</th>
        <th style="width: 30%">Total Prices</th>
        <th style="width: 30%">Averages Prices</th>
        <th style="width: 30%"></th>
    </tr>
    <tr *paFor="let item of getCategoriesShortName(); let i = index; let odd = odd; let even = even" [class.bg-info]="odd" 
            [class.bg-warning]="even">

      <paSummaryCategoryDisplay [pa-category]="item"></paSummaryCategoryDisplay> 
    </tr>
</table>
</div>

paSummaryCategoryDisplay является компонентом

@Component({
  selector: "paSummaryCategoryDisplay",
  template: `   <td class="col-md-2"></td>
                <td class="col-md-2" style="vertical-align:middle">
                {{item.nameCategory}}</td>
                <td class="col-md-2" style="vertical-align:middle;" >
                {{item.summaryCategory.countPrices}}</td>
                 <td class="col-md-2" style="vertical-align:middle">
                {{item.summaryCategory.totalPrices}}</td>

                <td class="col-md-2" style="vertical-align:middle;" >
                {{item.summaryCategory.averagePrices}}</td>
                <td class="col-md-2"></td>`
})

Как я могу установить ширину тд вдольс таблицей html?

РЕДАКТИРОВАНИЕ

Это мой измененный экран

Это мой основной шаблон

<div class="row m-2">
  <div class="col-4 p-2">   

    <paCategoriesTableShort></paCategoriesTableShort>   
  </div>


</div>

@Component({
    selector: "paCategoriesTableShort",
    templateUrl: "categoriesTableShort.component.html"


})

CategoriesTableShort.component.html

<table  class="table table-sm table-bordered table-striped" >

    <tr>
        <th style="width:30%"></th>
        <th style="width:30%">Name</th>
        <th style="width:30%">Count Prices</th>
        <th style="width:30%">Total Prices</th>
        <th style="width:30%">Averages Prices</th>
        <th style="width:30%"></th>
    </tr>
    <tr *paFor="let item of getCategoriesShortName(); let i = index; let odd = odd; let even = even" [class.bg-info]="odd" 
            [class.bg-warning]="even">

      <paSummaryCategoryDisplay [pa-category]="item"></paSummaryCategoryDisplay> 
    </tr>
</table>

@Component({
  selector: "paSummaryCategoryDisplay",
  template: `   <td style="width:30%"></td>
                <td style="vertical-align:middle;width:30%">
                {{item.nameCategory}}</td>
                <td style="vertical-align:middle;width:30%" >
                {{item.summaryCategory.countPrices}}</td>
                <td  style="vertical-align:middle;width:30%">
                {{item.summaryCategory.totalPrices}}</td>

                <td  style="vertical-align:middle;width:30%" >
                {{item.summaryCategory.averagePrices}}</td>
                <td style="width:30%"></td>`
})

Answer 1

В вашей таблице вы установили ширину 30% для "th" элементов.Но в ваших элементах "td" вы установили класс "col-md-2".

Вы установили различное "поведение" ширины для ваших элементов, но ожидаете того же выравнивания.

Попробуйте использовать «width: 30%» или «col-md-2» для и th и td следующим образом

<th class="col-md-2"></th>
<th class="col-md-2">Name</th>
<th class="col-md-2">Count Prices</th>
<th class="col-md-2">Total Prices</th>
<th class="col-md-2">Averages Prices</th>
<th class="col-md-2"></th>

В другой заметке:я бы не рекомендовал использовать CSS-стилизацию в самом элементе, рекомендуется установить стили в таблице стилей и использовать вместо них классы