html - autoWidth Does not work in DataTable plugin Angular

Question

My data table has 12 columns. These columns are set with the auto width to "true"; I think it is relatively small. and it shouldn't show problems ...

The DtOptions are set like this (in the angular component list):

  private dtOption: any = {
"paging": true,
"ordering": true,
"info": true,
"searching": false,
"order": [[0, "desc"]],
"language": {
  "sUrl": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Spanish.json"
},
"autoWidth": true,
"columns.visible": true

}; when initializing and re-init the table:

ngAfterViewInit() {
     this.Tabla = $(this.TableMaster.nativeElement);
     this.Tabla.DataTable(this.dtOption);
   }

 ReInitTable() {
   if (this.Tabla != null) {
    if ($.fn.DataTable.isDataTable(this.Tabla)) {
    this.Tabla.DataTable().destroy();
   }
  }
  }

The HTML Component w/ DataTable---

     <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="one">
          <br />
          <div class="table-responsive">
            <table #TableMaster class="table table-striped table-bordered">
              <thead>
                <tr>
                  <th [hidden]="true"></th>
                  <th [hidden]="true"></th>
                  <th>Fecha Inicio</th>
                  <th>Fecha Fin</th>
                  <th>Tipo de Producto</th>
                  <th>Nombre de Producto</th>
                  <th>Autor</th>
                  <th>Grupo de Investigación</th>
                  <th>Especialidad/área de Conocimiento</th>
                  <th>ámbito</th>
                  <th>El producto tiene</th>
                  <th>Idioma</th>
                  <th>Nombre Estudiante</th>
                  <th>Productos Realizados en el Evento</th>
                  <th style="width:10px">Estado</th>
                  <th style="width:70px">Acciones</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let item of ListaItems">
                  <td [hidden]="true">{{item.fechaModifica}}</td>
                  <td [hidden]="true">{{item.fechaRegistro}}</td>

                  <td title="{{item.fechaInicial}}">{{item.fechaInicial}}</td>
                  <td title="{{item.fechaFin}}">{{item.fechaFin}}</td>
                  <td title="{{item.tipoArticulo}}">{{item.tipoArticulo}}</td>
                  <td title="{{item.nombreArticulo}}">{{item.nombreArticulo}}</td>
                  <td title="{{item.autor}}">{{item.autor}}</td>
                  <td title="{{item.grupoInvestigacion}}">{{item.grupoInvestigacion}}</td>
                  <td title="{{item.areaConocimiento}}">{{item.areaConocimiento}}</td>
                  <td title="{{item.ambito}}">{{item.ambito}}</td>
                  <td title="{{item.productoTiene}}">{{item.productoTiene}}</td>
                  <td title="{{item.idioma}}">{{item.idioma}}</td>
                  <td title="{{item.nombreEstudiante}}">{{item.nombreEstudiante}}</td>
                  <td title="{{item.productosRealizadosEvento}}">{{item.productosRealizadosEvento}}</td>
                  
                  <td class="text-center">
                    <div class="btn-group btn-group-xs">
                      <button id="btnActualizar" data-toggle="tooltip" data-placement="top" title="Detalles / Actualizar" data-target="#ModalAgregar"
                              class="btn btn-info" (click)="Actualizar(ListaItems)">
                        <i class="fas fa-sliders-h"></i>
                      </button>

                      <a id="btnEliminar" title="{{item.eliminado ? 'Recuperar' : 'Eliminar'}}" data-toggle="tooltip" data-placement="top" class="btn btn-success" [ngClass]="{'btn-danger': !item.eliminado}" (click)="EliminarRecuperar(ListaItems)">
                        <i class="fa {{item.eliminado == true ? 'fa-recycle' : 'fa-trash'}}"></i>
                      </a>

                      <button id="btnHistorico" data-toggle="tooltip" data-placement="top"
                              title="{{item.activo ? 'Inactivar' : 'Activar'}}" Class="btn btn-success" [ngClass]="{'btn-danger': !ListaItems.activo}"
                              *ngIf="!ListaItems.eliminado" (click)="HistoricoInactivar(item)">
                        <i class="fa fa-power-off"></i>
                      </button>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

      </div>

Answer 1

等待大神答复