Solución:
Al configurar el ancho de las columnas, también debe configurar:
autoWidth: false
… en la propia DataTable
Sería bueno ver su mesa en acción, pero tengo la fuerte sensación de que esto es una cuestión puramente de amplitud de contenido. Elementos con display: table-cell intentará expandirse para mostrar la mayor cantidad de contenido posible sin envolver. Por ejemplo, el ancho del <th> que tiene el título “Protección de viaje”, que define como 10%; necesitaría una tabla bastante amplia para mostrar “Protección de viaje” dentro del 10%.
Así que anula el valor predeterminado word-wrap y word-break ajustes para <th> como esto :
table.dataTable thead tr th {
word-wrap: break-word;
word-break: break-all;
}
una especie de demostración (como se dijo, no puedo probar esto en su mesa IRL) -> http://jsfiddle.net/9vbz7thp/
Lo mejor sería ajustar el contenido de la <th>es para que se ajusten a los anchos codificados.
Si es el contenido de la <td>es demasiado grande (por lo general, una palabra muuuuuy larga que no se puede romper):
table.dataTable tbody tr td {
word-wrap: break-word;
word-break: break-all;
}
Por cierto: no es necesario definir anchos codificados en ambos <th> y <td>‘s. <td>obtiene automáticamente el ancho de la correspondiente <th>.
oTableDetails = $('#tblUserDetails').dataTable({
"autoWidth":false,
esta trabajando para mi