如何设置一个单独列的宽度？

Question

我使用Angular DataTables显示存储在数据库中的一些数据。有一个叫description一列可以包含大量的文字和理想，将具有比其余列的宽度更大：

我试着用columnDefs以及autoWidth但没有成功（我想无论是单独以及两者的组合）。在我component.ts文件：

  dtOptions = {
    pagingType: 'full_numbers',
    pageLength: 5,
    scrollX: true,
    autoWidth: false,
    columnDefs: [{width: '40%', targets: 5}]
  };

然后在component.html

<table datatable [dtOptions]="dtOptions" class="row-border hover" style="width:100%">
  <thead>
      <tr>
        <th *ngFor="let column of feedbackTable.columns">
          {{ column }}
        </th>
      </tr>
  </thead>
  <tbody>
    <tr *ngFor="let row of feedbackTable.data">
      <td *ngFor="let cell of row">
        {{cell}}
      </td>
    </tr>
  </tbody>
</table>

该scrollX工作正常，但是，我没有得到列的宽度改变。我使用dtOptions是否正确？

当我从下面结合了答案，但它仍然不会影响列的宽度：

<th *ngFor="let column of feedbackTable.columns" [class.description]="column === 'user_description'">

和

 th.description {
    width: 40% !important;
  }

还是给

Answer 1

你可以用CSS如下做到这一点：

添加CSS规则

th.description {
  width: 40%;
}

然后在你的组件模板，你可以申请的描述类只用角类结合的描述列：

<thead>
  <tr>
    <th *ngFor="let column of feedbackTable.columns" [class.description]="column === 'description'">
      {{ column }}
    </th>
  </tr>
</thead>

这也将是更好的为您做出的条件基础上，列的，而不是显示的名称的ID，但是，那么你需要增加自己的列属性为对象如column={id: 'desc', name: 'description'}

与ngStyle更新：

<thead>
  <tr>
    <th *ngFor="let column of feedbackTable.columns" [ngStyle]="{'width':column === 'description' ? '100px' : '' }">
      {{ column }}
    </th>
  </tr>
</thead>