0

Tengo un problema con mi css. La tabla es responsive pero el contenido no. introducir la descripción de la imagen aquí Estoy utilizando boostrap y algunas clases customizadas. La tabla esta hecha con jquery y js.

Dejo las clases css también.

https://prizes.birdmc.us/dashboard/dist/css/style.css

No entiendo porque pasa, he intentado varias cosas como cambiar el tamaño de la tabla pero nada ha dado resultado.

$(document).ready(function() {
    $('#example thead tr').clone(true).appendTo( '#example thead' );
    $('#example thead tr:eq(1) th').each( function (i) {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Buscar '+title+'" />' );

        $( 'input', this ).on( 'keyup change', function () {
            if ( table.column(i).search() !== this.value ) {
                table
                    .column(i)
                    .search( this.value )
                    .draw();
            }
        });
    });

    var table = $('#example').DataTable( {
        orderCellsTop: true,
        fixedHeader: true
    });
});
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<div class="row">
      <div class="col">
        <div class="card mb-grid">
          <div class="table-responsive-md">
            <table id="example" class="table table-actions table-striped table-hover mb-0" data-table>
              <thead>
                <tr>
                  <th scope="col">1º Apellido</th>
                  <th scope="col">2º Apellido</th>
                  <th scope="col">nombre</th>
                  <th scope="col">número de casa</th>
                  <th scope="col">apuntes</th>
                  <th scope="col">localización</th>
                  <th scope="col">acciones</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>a</td>
                  <td>a</td>
                  <td>a</td>
                  <td>1</td>
                  <td>loremp isum</td>
                  <td>
                        <span class="badge badge-pill badge-primary">a, a</span>
                      </td>
                      <td>
                        <button class="btn btn-sm btn-danger">Editar</button>
                      </td>
                    </tr>
                  </tbody>
                </table>
                <script>
                
                </script>
              </div>
            </div>
          </div>
        </div>

Se agradece la ayuda, un saludo.

1
  • Haz un inspeccionar elemento, y fíjate a partir de qué elemento deja de ser responsive para poder brindarte ayuda :)
    – Patrick
    Commented el 22 jun. 2019 a las 11:18

1 respuesta 1

0

Comentas que tu tabla es responsive, pero que el contenido no. Inspeccionando el código se puede ver como ni la tabla ni el contenido son responsive.

Por lo que tienes que hacer responsive la tabla / thead / tbody / tr:

#example, #example thead, #example tbody, #example thead tr, #example tbody tr{
  width:100% !important;
}

Ahora las columnas (en tu caso son 7 columnas por lo que he dividido el 100% entre 7):

#example thead tr th, #example tbody tr td {
  width: calc(100% / 7) !important;
  padding: 0px;
  margin: 0px;
}

Y el contenido de las columnas:

#example thead tr th input {
  width: 100%;
}

Falta quitar la clase col ya que al ir seguida de la row esta aplicando un padding:

<div class="row">
    <div>
        ...
    </div>
</div>

Tu Respuesta

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