Невозможно установить ширину столбца в угловых данных

Question

var app = angular.module('tableTest', ['datatables']); 
app.controller('TableCtrl',function ($scope,$compile,DTOptionsBuilder, DTColumnBuilder) { 
$scope.showUpdateForm = function(code,reason,startTime,endTime,transactionGroup,geoGroup,transactionGroup) { 
    $scope.$parent.code = code; 
    $scope.$parent.reason = reason; 
    $scope.$parent.startTime = startTime.split(' ')[1].substring(0,startTime.split(' ')[1].lastIndexOf(':')); 
    $scope.$parent.endTime = endTime.split(' ')[1].substring(0,endTime.split(' ')[1].lastIndexOf(':')); 
    $scope.$parent.startDate = startTime.split(' ')[0]; 
    $scope.$parent.endDate = endTime.split(' ')[0]; 
    $scope.$parent.transactionGroup = transactionGroup; 
    $scope.$parent.geoGroup = geoGroup; 
    $scope.$parent.group = transactionGroup; 
    $scope.$parent.getGeographyList(); 
    $scope.$parent.getTransactionsList(); 

} 
var vm = this; 
vm.dtOptions = DTOptionsBuilder.newOptions() 
    .withOption('ajax', { 
    url: '<some url>', 
    type: 'GET' 
}) 
.withDataProp('data') 
    .withOption('serverSide', true) 
    .withOption('createdRow', function(row, data, dataIndex) { 
     $compile(angular.element(row).contents())($scope); 
    }) 
    .withOption('responsive', true).withOption('bAutoWidth', false) 
    .withPaginationType('full_numbers'); 
vm.dtColumns = [ 
    DTColumnBuilder.newColumn('group').withTitle('Group').withOption('bSortable',true), 
    DTColumnBuilder.newColumn('startTime').withTitle('Start').withOption('bSortable',true), 
    DTColumnBuilder.newColumn('endTime').withTitle('End').withOption('bSortable',true), 
    DTColumnBuilder.newColumn('status').withTitle('Status').withOption('bSortable',true), 
    DTColumnBuilder.newColumn('reason').withTitle('Reason').withOption('bSortable',true).withOption('sWidth', '20%'), 
    DTColumnBuilder.newColumn('transactionGroup').withTitle('Transaction Group').withOption('bSortable',true), 
    DTColumnBuilder.newColumn('geoGroup').withTitle('Geo Group').withOption('bSortable',true), 
    DTColumnBuilder.newColumn('group').withTitle('Current Status').renderWith(function(data, type, full, meta) { 
     var arr = full.endTime.split(/-|\s|:/); 
     var endTime = new Date(arr[0], parseInt(arr[1])-1, arr[2], arr[3], arr[4], arr[5]); 
     arr = full.startTime.split(/-|\s|:/); 
     var startTime = new Date(arr[0], parseInt(arr[1])-1, arr[2], arr[3], arr[4], arr[5]); 
     var currentTime = new Date(); 
     var color = ['#2196F3','#009688']; 
     var currentStatus = ['INACTIVE','ACTIVE'] 
     var index; 
     if(startTime.getTime() <= currentTime.getTime() && currentTime.getTime() <= endTime.getTime()) { 
      index = 1; 
     } else { 
      index = 0; 
     } 
     return '<span style="background : '+color[index]+';color: #FFF;font-weight: 500;" class="currentStatus"> &nbsp;&nbsp;'+currentStatus[index]+'&nbsp;&nbsp; </span>'; 
    }).notSortable(), 
    DTColumnBuilder.newColumn('code').withTitle('').notSortable().renderWith(function(data, type, full, meta) { 
     return '<div class="btn-group" > <label class="btn btn-primary"><input type="radio" name="blockedTransaction" ng-click="showUpdateForm(\''+full.code+'\',\''+full.reason+'\',\''+full.startTime+'\',\''+full.endTime+'\',\''+full.transactionGroup+'\',\''+full.geoGroup+'\',\''+full.transactionGroup+'\')" ng-model="blockedTransaction" data-toggle="modal" data-target="#updateForm" data-whatever="@getbootstrap" >EDIT</label></div>'; 
    }) 
];}); 

Приведенный выше код - мой настольный контроллер. Проблема в том, что я не могу установить ширину столбца. Когда для столбца имеется много данных, таблица изменяет размер и выходит из своей страницы. Что не так в коде. Какую парную пару правого ключа нужно поместить в «withOption», чтобы она правильно задала ширину столбца. Link to Datatables plugin и Link to Datatables + Angular plugin

Answer 1

Поскольку ваш тест использует длинное слово без пробелов, вам нужно будет использовать word-break. См. Это pen, например:

.dataTable td { 
    word-break: break-all; 
}