Solución:
Al final, la mejor solución fue establecer el ancho de la mesa interior en:
table-layout:fixed;
width: 98% !important;
Todas las soluciones enumeradas aquí tenían un comportamiento de recorte no deseado. Limitar el ancho de la tabla de esta manera también me permitió ajustar dinámicamente la altura de la tabla de modo que la barra de desplazamiento horizontal pueda aparecer o desaparecer a pedido sin introducir un desplazamiento horizontal.
http://jsfiddle.net/FBpLA/15/
.dataTables_scrollBody
{
overflow-x:hidden !important;
overflow-y:auto !important;
}
esto funcionó para mí para todas mis tablas. Esto también fue solo un problema con Firefox e IE, Chrome lo manejó bien para empezar.
Solo puedes agregar overflow-x: hidden;
al .dataTables_scrollBody
si no puede encontrar algo que lo solucione de forma nativa en el script. Desafortunadamente, probablemente también necesitará usar !important
para aumentar su especificidad por encima de los estilos en línea que ya se han aplicado al elemento.
http://jsfiddle.net/SombreErmine/FBpLA/12/