Angularjs 角度数据表在 DTColumnDef 上更改列宽答案

【问题标题】：Angularjs angular datatables changing column width on DTColumnDefAngularjs 角度数据表在 DTColumnDef 上更改列宽
【发布时间】：2018-01-05 07:29:50
【问题描述】：

版本：AngularJS 1.6.4，angular-datatables 0.5.6

问题：无法使用

更改列宽

.withOption('width', '20%')

我浏览了大部分 SO 问题，但仍未找到答案。

这是我的示例代码：

JS：

 $scope.dtOptions = DTOptionsBuilder.newOptions()
    .withOption('paging', false)
    .withOption('bInfo', false)
    .withOption('searching', false)
    .withScroller().withOption('scrollY', 300)
    .withOption('responsive', true)
    .withOption('scrollX', true)
    .withOption('scrollCollapse', true)
    .withOption("rowCallback", rowCallback)
    .withOption('autoWidth', true);


 $scope.dtColumnDefs = [
        DTColumnDefBuilder.newColumnDef(0).notSortable(),
        DTColumnDefBuilder.newColumnDef(1).notSortable(),
        DTColumnDefBuilder.newColumnDef(2),
        DTColumnDefBuilder.newColumnDef(3),
        DTColumnDefBuilder.newColumnDef(4),
        DTColumnDefBuilder.newColumnDef(5).notSortable(),
        DTColumnDefBuilder.newColumnDef(6).notSortable(),
        DTColumnDefBuilder.newColumnDef(7).notSortable(),
        DTColumnDefBuilder.newColumnDef(8).notSortable().withOption('width', '20%'),
        DTColumnDefBuilder.newColumnDef(9).notSortable(),
        DTColumnDefBuilder.newColumnDef(10).notSortable(), 
        DTColumnDefBuilder.newColumnDef(11).notSortable(),
        DTColumnDefBuilder.newColumnDef(12).notSortable(),
        DTColumnDefBuilder.newColumnDef(13).notSortable()
    ];

HTML：

 <table datatable="ng" dt-options="dtOptions" dt-column-defs="dtColumnDefs" class="hover">
            <thead>
                <tr>
                     <th><!--14 headers here--></th>
                </tr>
            </thead>
        <tbody>
                <tr>
                     <td><!--14 data cells here--></td>
                </tr>
       </tbody>
 </table>

我已经确认大多数 dtOptions withOption 工作正常，除了

 .withOption('autoWidth', true);

在 dtColumnDefBuilder 中，

 .notSortable()

工作正常，但不是

.withOption('width','20%')

我尝试过的事情：

设置表格标题的内联样式宽度
注释掉 dtOptions .withOption() 来检查

感谢您的帮助

【问题讨论】：

标签： angularjs datatables width angular-datatables

【解决方案1】：

如果您想要推翻默认值和 DT 的假设，您必须声明一个显式的 CSS 类。 autoWidth 或多或少没用，恕我直言。示例：

.td-small {
  width: 40px;
  max-width: 40px;
}

DTColumnDefBuilder
 .newColumnDef(8)
 .notSortable()
 .withClass('td-small')

你可以组合类，即.withClass('classA classB classC')

尽管文档讨论了百分比，但它仅适用于非常狭窄的场景，您将所有列设置为具有特定百分比并且将容器设置为具有 宽度也固定，例如900px。 “未定义”的20% 不计算。我可以在我的项目中找到的另一个典型示例是需要用省略号缩小的长内容：

.td-200-ellipsis {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

如果您想对列宽进行极端控制，超出 DataTables 范围，请参阅此答案 -> jQuery DataTables fixed size for ONE of the columns?

【讨论】：