css - descargar - bootstrap html

Twitter-Bootstrap 3.3.1-Tablas de datos siempre desplazables horizontalmente

Question

Acabo de actualizar de Bootstrap 3.2.0 a Bootstrap 3.3.1. También estoy usando DataTables-Plugin y, por lo tanto, estoy usando dataTables.bootstrap.css y dataTables.bootstrap.js, respectivamente.

Con la versión 3.2.0 no tuve ningún problema, hasta ahora. Con la versión 3.3.1, todas las tablas son ligeramente desplazables en la dirección horizontal (ver captura de pantalla).

Tengo la tabla dentro de una <div class="table-responsive"> . Por lo tanto, normalmente, la barra de desplazamiento horizontal debe mostrarse en pantallas más pequeñas, pero no de forma predeterminada.

¿Algunas ideas?

Answer 1

Las tablas producidas por DataTables están configuradas para ser receptivas. Por lo tanto, no es necesario que los encierre en una división de arranque "sensible a la tabla".

Tu código puede verse así:

    <div class="table-responsive">
        <table class="table" id="myTable">
            .... blah blah ...
        </table>
    </div>

Luego, más adelante en javascript lo convierte en una tabla DataTables receptiva:

$(''#myTable'').DataTable({ responsive: true });

Esto es redundante y causa una barra de desplazamiento extra. Simplemente elimine la div sensible a la tabla.

Answer 2

pon esto en tu custom.css, la datatable auto generate .row está afectando la barra de desplazamiento cuando es autoflow-x ..

#example_wrapper .row{
    margin-right:0px;
    margin-left:-15px;  
}

Answer 3

Cualquiera de las respuestas me funciona.

Podría arreglarlo agregando un ancho = "100%! Importante" a la mesa.

.table-responsive table{
    width: 100% !important;
}

Answer 4

Esto funciona para mí

En Bootstrap v3.3.4 bootstrap.min.css .table-responsive {min-height: .01%; overflow-x: auto;} está causando el problema Entonces, en lugar de cambiar en el archivo css core bootstrap (Como no se recomienda)

Edito las siguientes líneas de código en mi archivo css personalizado para anular bootstrap css

.table-responsive {
  overflow-x: inherit;
}

Esto resolverá el problema.