Question

我使用Angular6。

我有以下屏幕

此屏幕包含两个元素。一个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表格的td宽度？

已编辑

这是我的屏幕修改

这是我的主模板

<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

在表格中，第“ th”个元素的宽度设置为30％。但是在“ td”元素中，您已将类设置为“ col-md-2”。

您在元素上设置了不同的宽度“行为”，但是期望相同的对齐方式。

尝试在和td上同时使用“ width：30％”或“ col-md-2”，如下所示：

<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样式，一种好的做法是在样式表中设置样式，而改用类

angular 6 bootstrap如何在组件模板中为td表设置宽度

1 个答案: