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%;
}

然后在组件模板中，您只能将描述类应用于具有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>

Answer 2

我从这篇文章和其他文章中尝试了datatables选项和CSS的每种组合，但没有用。

您需要在数据表呈现后更新列的样式。我可能会从数据表中挂入一个回调来触发操作，但是我只是设置了一个快速超时，所以效果很好。在我的ngOnInit中：

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

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

如何设置单个列的宽度？

2 个答案: