1

Tengo un problema al momento de usar el plugin jquery datatables con el scroll horizontal.

Active el scroll horizontal para las ocasiones en que la tabla es mas grande que el contenedor y de esta manera se mantengan las proporciones justas, sin embargo en un tabla que funcionaba correctamente sin el scroll, se daño al activar el scroll en el eje horizontal.

Para activar el scroll uso las siguiente lineas de código:

$(document).ready(function() {
    $('#tblemp').DataTable( {
        "scrollX": true
    } );
} );

Tabla con el problema

$(document).ready(function() {
    $('#example').DataTable( {
        "scrollX": true
    } );
} );
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
  <script src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>  
  <link rel="stylesheet" href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">

  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Problema</title>
</head>
<body>
<div class="container">
  <div class="row">
    <div class="col s12 m12 l12">
      <table id="example">
        <thead>
        <tr>
          <th class="tg-031e">Cedula</th>
          <th class="tg-031e">Nombres</th>
          <th class="tg-yw4l">Modalidad</th>
          <th class="tg-yw4l">Email</th>
          <th class="tg-yw4l">Actualizar</th>
          <th class="tg-yw4l">Eliminar</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td class="tg-031e">0702110453</td>
          <td class="tg-031e">SAQUINAULA RODRIGO PATRICIO</td>
          <td class="tg-yw4l">nombramiento</td>
          <td class="tg-yw4l"></td>
          <td class="tg-yw4l">X</td>
          <td class="tg-yw4l">O</td>
        </tr>
        <tr>
          <td class="tg-031e">0702471806</td>
          <td class="tg-031e">JIMENEZ FEIJOO GRACIELA ESPERANZA</td>
          <td class="tg-yw4l">nombramiento</td>
          <td class="tg-yw4l">[email protected]</td>
          <td class="tg-yw4l">X</td>
          <td class="tg-yw4l">O</td>
        </tr>
        <tr>
          <td class="tg-yw4l"></td>
          <td class="tg-yw4l"></td>
          <td class="tg-yw4l"></td>
          <td class="tg-yw4l"></td>
          <td class="tg-yw4l"></td>
          <td class="tg-yw4l"></td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

</body>
</html>

A continuación la tabla normal, y la tabla deformada.

Tabla Normal Tabla Normal

Tabla Dañada Tabla Dañada

En la tabla deforme se puede ver como las columnas aparecen desfasadas, es decir que la cabecera con concuerda con el cuerpo de tabla.

¿Qué podría hacer para solucionar este problema?

EDIT

Me he dado cuenta el problema es con pantallas grandes, ajustando el ancho del div a 800px se arregla de alguna manera el problema, pero no es lo que busco, ya que necesito que la tabla se vea en todo el espacio del contenedor.

Con esta linea de css, se arregla pero solo con el ancho 800px

div.dataTables_wrapper {
    width: 800px;
    margin: 0 auto;
}
0

1 respuesta 1

1

Una solución es definir que el estilo .dataTables_scrollHeadInner tenga margin: 0 auto (para centrar la table que contiene los headers

// UPDATE

Si quieres que ocupe el 100% del ancho disponible, podrias hacer esto:

  • Crear una regla para #example que indique width:100%.
  • Para hacerla responsive, podemos hacer un JS para detectar el resize del navegador y actualizar el tamaño de la table ya el plugin para scroll horizontal establece a la misma un ancho en px.

Así:

$(document).ready(function() {
  var table = $('#example').DataTable({
    "scrollX": true
  });
  
  $(window).on('resize', function() {
    $('#example').css('width', '100%');
    table.draw(true);
  });
});
#example {
  width: 100%;
}
.dataTables_scrollHeadInner {
  margin: 0 auto;
}
<!DOCTYPE html>
<html>

<head>
  <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
  <script src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">

  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Problema</title>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col s12 m12 l12">
        <table id="example">
          <thead>
            <tr>
              <th class="tg-031e">Cedula</th>
              <th class="tg-031e">Nombres</th>
              <th class="tg-yw4l">Modalidad</th>
              <th class="tg-yw4l">Email</th>
              <th class="tg-yw4l">Actualizar</th>
              <th class="tg-yw4l">Eliminar</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="tg-031e">0702110453</td>
              <td class="tg-031e">SAQUINAULA RODRIGO PATRICIO</td>
              <td class="tg-yw4l">nombramiento</td>
              <td class="tg-yw4l"></td>
              <td class="tg-yw4l">X</td>
              <td class="tg-yw4l">O</td>
            </tr>
            <tr>
              <td class="tg-031e">0702471806</td>
              <td class="tg-031e">JIMENEZ FEIJOO GRACIELA ESPERANZA</td>
              <td class="tg-yw4l">nombramiento</td>
              <td class="tg-yw4l">[email protected]</td>
              <td class="tg-yw4l">X</td>
              <td class="tg-yw4l">O</td>
            </tr>
            <tr>
              <td class="tg-yw4l"></td>
              <td class="tg-yw4l"></td>
              <td class="tg-yw4l"></td>
              <td class="tg-yw4l"></td>
              <td class="tg-yw4l"></td>
              <td class="tg-yw4l"></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

</body>

</html>

3
  • Es una opción útil, sin embargo sigue quedando mas pequeño que el contenedor, no se podría hacer algo para usar todo el espacio del contenedor? Commented el 13 jun. 2017 a las 21:09
  • @JuanPinzón, he actualizado mi respuesta.
    – Marcos
    Commented el 14 jun. 2017 a las 15:00
  • Gracias Marcos, me fue útil tu respuesta. Commented el 14 jun. 2017 a las 15:11

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.