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"> </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"> </th><th colspan="3"> </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>