如何设置单个列的宽度？

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 的所有组合，但没有任何效果。

您需要在数据表呈现后更新列的样式。可能有一个回调我可以从数据表中挂钩以触发操作，但我只是设置了一个快速超时并且它工作正常。在我的 ngOnInit 中：

    setTimeout(()=>{
      let firstColumn = document.querySelector('th');
      firstColumn.setAttribute('style', 'width: 150px !important;');
    }, 10)

如果稍后重新渲染表格，您可能需要再次执行此操作。

Answer 2

您可以使用 CSS 实现这一点，如下所示：

添加 CSS 规则

th.description {
  width: 40%;
}

然后在您的组件模板中，您可以将描述类仅应用于具有 Angular 类绑定的描述列：

<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>