Especificando un ancho de columna fijo en jQuery Datatables

Solución:

Este no es un problema de DataTables. Vea cómo se determinan los anchos de columna. Basado en este algoritmo, veo las siguientes dos soluciones.

Solucion 1

Calcule usted mismo el ancho de la mesa y configúrelo en consecuencia.

#example {
  width: 3562px;
}

Vea el ejemplo en vivo aquí: http://jsfiddle.net/cdog/jsf6cg6L/.

Solucion 2

Establezca el ancho de contenido mínimo (MCW) de cada celda y deje que el agente de usuario determine los anchos de columna.

Para hacer esto, agregue clases a las columnas de destino para poder diseñarlas:

var table = $('#example').DataTable({
  tabIndex: 8,
  dom: '<"fcstTableWrapper"t>lp',
  bFilter: false,
  bAutoWidth: false,
  data: [],
  columnDefs: [{
    class: 'details-control',
    orderable: false,
    data: null,
    defaultContent: '',
    targets: 0
  }, {
    targets: 1
  }, {
    class: 'col-2',
    targets: 2
  }, {
    class: 'col-3',
    targets: 3
  }, {
    targets: 4
  }, {
    targets: 'dlySlsFcstDay'
  }, {
    targets: 'dlySlsFcstWkTtl'
  }],
  order: [[1, 'asc']]
});

Luego, establezca el valor deseado de la propiedad de ancho mínimo para cada clase:

.col-2,
.dlySlsFcstWkTtl {
  min-width: 60px;
}

.col-3 {
  min-width: 1100px;
}

Vea el ejemplo en vivo aquí: http://jsfiddle.net/cdog/hag7Lpm5/.

Aquí hay una muestra de código (se corrigió el ancho de columna para Tabla de 4 columnas):

1. establecer autoWidth: false;
2. establezca los valores de px en las primeras 3 columnas;
3. importante: compruebe si el ancho de la tabla es un poco más de 3 columnas + una última;

4. ajuste el ancho de la mesa y la cuarta columna.

   $('#example').DataTable({ //four column table
      autoWidth: false, //step 1
      columnDefs: [
         { width: '300px', targets: 0 }, //step 2, column 1 out of 4
         { width: '300px', targets: 1 }, //step 2, column 2 out of 4
         { width: '300px', targets: 2 }  //step 2, column 3 out of 4
      ]
   });
   

Establecer ancho de mesa, 4 * 300px:

     #example { width: 1200px };

Como resultado, verá las primeras 3 columnas con un ancho de 300 px y la última será flexible y de aproximadamente 150 px (lo que requiere un ajuste adicional).

---

Por último, si bien no menos importante: El tamaño de columna fijo 300px no le impedirá el caso cuando la celda contiene una palabra demasiado larga (> 300px sin espacios). Por lo tanto, debe tener en cuenta que todas las palabras deben ser menores que el lado fijo de su columna.

Para el <table> etiqueta o su css class or css id agregue el siguiente estilo:

`table{
     margin: 0 auto;
     width: 100%;
     clear: both;
     border-collapse: collapse;
     table-layout: fixed;
     word-wrap:break-word;
}`

---

---

Utiliza Nuestro Buscador