Foros del Web » Programando para Internet » Javascript »

tfooter de tabla fijo

Estas en el tema de tfooter de tabla fijo en el foro de Javascript en Foros del Web. Hola, estoy realizando unos reportes en linea, utilizando bootstrap para enchular la vista, y sobretodo, que sea responsivo. La info la muestro en una TABLE, ...
  #1 (permalink)  
Antiguo 24/09/2014, 13:38
Avatar de omar_gutierrez  
Fecha de Ingreso: febrero-2011
Mensajes: 144
Antigüedad: 13 años, 9 meses
Puntos: 2
Pregunta tfooter de tabla fijo

Hola, estoy realizando unos reportes en linea, utilizando bootstrap para enchular la vista, y sobretodo, que sea responsivo.

La info la muestro en una TABLE, tuve que utilizar un plugin (jquery.stickytableheaders.min.js) para dejar fijo el THEADER y no pierda el ancho que debe de tener, el problema es con el TFOOT, necesito mostrar los totales fijos en el pie de tabla, si le hago un position:fixed; bottom:0px; pierde el ancho que deberia tener, y se queda en la esquina.

Esto puedo lograrlo con div's, pero se tendria que quedar un ancho fijo, y necesito que toda la tabla sea responsiva, y la cabeza y pie de la misma, fijas.

Codigo de vista:

Código PHP:
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta charset="utf-8">
<title>Reporte de papel</title>
    <? $xml simplexml_load_file($_SERVER['DOCUMENT_ROOT'].'/papel/xml/InventarioPapel.xml'?>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="assets/css/estilos.css">
</head>

<body>
<section>
<div class="table-responsive">
    <table class="table table-bordered table-condensed">
    <thead class="fondo">
        <tr><th>Reporte en revisión</th><th colspan="4">&nbsp;</th><th colspan="3">VER DETALLE</th></tr>
        <tr><th>Fecha: <?=date('Y-m-d'?></th><th colspan="4">REPORTE EXISTENCIAS DE PAPEL</th><th colspan="3">MENÚ</th></tr>
        <tr><th>Hora: <?=date('H:i:s'?></th><th colspan="4">&nbsp;</th><th colspan="3">&nbsp;</th></tr>
    </thead>
    
    <tbody>
        <? $x 0; foreach($xml->Table as $tr) { ?>
            <tr>
                <td><?=$tr->Chr_ArtDecripcion?></td>
                <td><?=$tr->Chr_ExistenciaTransWPPI?></td>
                <td><?=$tr->Chr_ExistenciaAlmaWPPI?></td>
                <td><?=$tr->Chr_ExistenciaAlmaPaso?></td>
                <td><?=$tr->Chr_ExistenciaTransJuarez?></td>
                <td><?=$tr->Chr_ExistenciaAlmaJuarez?></td>
                <td><?=$tr->Chr_ExistenciaTotal?></td>
                <td><?=$tr->Chr_CostoTotal?></td>
            </tr>
        <? $x $x 1; } $y $x 1?>
    </tbody>
    
    <tfoot style="position:fixed; bottom:0px;">
        <tr>
            <td><?=$xml->Table[$y]->Chr_ArtDecripcion?></td>
            <td><?=$xml->Table[$y]->Chr_ExistenciaTransWPPI?></td>
            <td><?=$xml->Table[$y]->Chr_ExistenciaAlmaWPPI?></td>
            <td><?=$xml->Table[$y]->Chr_ExistenciaAlmaPaso?></td>
            <td><?=$xml->Table[$y]->Chr_ExistenciaTransJuarez?></td>
            <td><?=$xml->Table[$y]->Chr_ExistenciaAlmaJuarez?></td>
            <td><?=$xml->Table[$y]->Chr_ExistenciaTotal?></td>
            <td><?=$xml->Table[$y]->Chr_CostoTotal?></td>
        </tr>
    </tfoot>
      </table>
    
    </div>
</section>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.stickytableheaders.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js"></script>
  <script>
    var offset = $('.navbar').height();
    $("html:not(.legacy) table").stickyTableHeaders();
  </script>
</body>
</html>

Etiquetas: fijo, pie, tabla
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 09:29.