1

Cómo puedo hacer scroll a las filas de una tabla?? los resultados no están paginados y de esa manera creo se puede evitar cuando el número de registros crezca, se mantenga en la vista visible el encabezdo de la tabla y los elementos por encima de ésta. introducir la descripción de la imagen aquí en resumen, hacerle scroll solo a la región sombreada de la imagen. Este es el código de la vista:

{% block vistas %}
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <ol class="breadcrumb">
                <li>LISTADO DE EMPAQUE&nbsp;-&nbsp;BULTO&nbsp;{{ bulto.numero}}&nbsp;{{bulto.descripcion}}</li>
                <li><a id="lnkRecargaRegistros" href="{{ path('bulto_recargarTablaArticulos', {'bultoId':bulto.internalId|uuid_encode}) }}"><span class="glyphicon glyphicon-refresh"></span></a></li>
            </ol>
        </div>            
    </div>    
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <a id="lnkNuevoRegistro" class="btn btn-link" href="{{ path('bulto_agregarArticulo', {'bultoId':bulto.internalId|uuid_encode}) }}"><span class="glyphicon glyphicon-plus"></span>&nbsp;Agregar</a>
            <a id="lnkEditaRegistro" class="btn btn-link disabled"><span class="glyphicon glyphicon-edit"></span>&nbsp;Editar</a>
            <a id="lnkEliminaRegistro" class="btn btn-link disabled"><span class="glyphicon glyphicon-remove"></span>&nbsp;Eliminar</a>
            <a class="btn btn-link lnkClasificarArticulo disabled" href="{{ path('bulto_clasificarArticulos')}}" data-clasificacion="menaje" data-menaje="{{bulto.colaborador.menaje.internalId|uuid_encode}}"><span class="glyphicon glyphicon-check"></span>&nbsp;Clasificar como Menaje</a>
            <a class="btn btn-link lnkClasificarArticulo disabled" href="{{ path('bulto_clasificarArticulos')}}" data-clasificacion="enaje" data-menaje="{{bulto.colaborador.menaje.internalId|uuid_encode}}"><span class="glyphicon glyphicon-check"></span>&nbsp;Clasificar como Enaje</a>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <table id="tablaDatos" data-src-eliminar="{{ path('bulto_eliminarArticulo') }}" class="table table-condensed table-responsive table-hover">
                <thead>
                    <tr class="bg-primary">
                        <th><input class="checkbox"  id="chkTodosArticulos" type="checkbox" title="Marcar todos"></th>
                        <th class="text-center">No</th>
                        <th class="text-justify">Art&iacute;culo</th>
                        <th class="text-center">Es menaje</th>
                        <th class="text-center">Piezas</th>
                        <th class="text-center">USD Totales</th>
                        <th class="text-center">Valor por Piezas (USD)</th>
                        <th class="text-center">Valor Total (Bs.S)</th>
                    </tr>
                </thead>
                <tbody>
                    {% for articulo in articulos %}
<tr>
    <td><input class="checkbox checkbox-articulos" type="checkbox" name="chkArticuloId[]" data-id="{{ articulo.internalId|uuid_encode }}" data-src-editar="{{path('bulto_editarArticulo', {'id':articulo.internalId|uuid_encode})}}" data-titulo-ventana="Editar artículo"></td>
    <td class="text-center">{{ articulo.orden }}</td>
    <td class="text-justify">{{ articulo.descripcion }}</td>
    <td class="text-center"><span id="articulo-{{articulo.internalId|uuid_encode}}" {% if articulo.esMenaje == true %}class="glyphicon glyphicon-check" data-msg=""{% else %}class="glyphicon glyphicon-unchecked" data-msg=""{% endif %}></span></td>
    <td class="text-center">{{ articulo.cantidadPiezas }}</td>
    <td class="text-center">{{ articulo.precioTotalUSD|number_format(2, '.', ',') }}</td>
    <td class="text-center">{{ articulo.precioUnitario|number_format(2, '.', ',') }}</td>
    <td class="text-right">{{ (articulo.precioTotalUSD*menaje.tasaConversion)|number_format(2,'.',',') }}</td>
</tr>    

{% endfor %}


{% endblock %}

1 respuesta 1

1

Aqui esta la respuesta que estás buscando.

https://stackoverflow.com/questions/14834198/table-scroll-with-html-and-css

si te lo puedo resumir basicamente solo es agregarle la propiedad overflow:auto; al div de tu tbody.

1
  • bueno la verdad probé con el overflow sobre el tbody e igual me pone el scrollbar en la página, aunque le puse hiden.
    – Francisco
    el 27 abr. 2020 a las 13:15

Tu Respuesta

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

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