1

Alguien podría ayudarme como hacer que la cabecera y el pie de la tabla se quede inmovilizada con css o javascript al hacer scroll?

<style>
	table.tablaordenada {
		font-family:arial;
		background-color: #CDCDCD;
		font-size: 8pt;
		width: auto;
		margin: 0 auto;

	}

	table.tablaordenada thead tr th, table.tablaordenada tfoot tr th {
		background-color: #e6EEEE;
		border: 1px solid #FFF;
		font-size: 8pt;
		padding: 4px;
	}


	table.tablaordenada thead tr .header {
		background-image: url(bg.gif);
		background-repeat: no-repeat;
		background-position: center right;
		cursor: pointer;
		text-align: center;
	}

	table.tablaordenada tbody td {
		color: #3D3D3D;
		padding: 4px;
		background-color: #FFF;
		vertical-align: top;
	}

	table.tablaordenada tbody tr.odd td {
		background-color:#F0F0F6;
	}

	table.tablaordenada thead tr .headerSortUp {
		background-image: url(asc.gif);
	}

	table.tablaordenada thead tr .headerSortDown {
		background-image: url(desc.gif);
	}

	table.tablaordenada thead tr .headerSortDown, table.tablaordenada thead tr .headerSortUp {
		background-color: #8dbdd8;
	}
</style>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    </head>
    <body>


        <table class="tablaordenada " border="0" cellpadding="0" cellspacing="1">

            <thead>
                <tr>
                    <th rowspan="2"><a href=""></a>&nbsp;#</th>
                    <th rowspan="2">CIA</th>
                    <th colspan="2">Ambulatorio</th>
                    <th colspan="2">Hospitalario</th>
                    <th colspan="2">Total</th>
                </tr>
                <tr>
                    <th style="text-transform: uppercase;"> Cuentas </td>
                    <th style="text-transform: uppercase;"> Consumo </td>
                    <th style="text-transform: uppercase;"> Cuentas </td>
                    <th style="text-transform: uppercase;"> Consumo </td>
                    <th style="text-transform: uppercase;"> Cuentas </td>
                    <th style="text-transform: uppercase;"> Consumo </td>
                </tr>	
            </thead>
            <tbody>


                <tr>
                    <td align="center">1</td>
                    <td>empresa</td>
                    <td align="right">5452</td>
                    <td align="right">545212</td>
                    <td align="right">5424121</td>
                    <td align="right">4523131</td>
                    <td align="right">5421</td>
                    <td align="right">541512</td>
                </tr>
                <tr>
                    <td align="center">1</td>
                    <td>empresa</td>
                    <td align="right">5452</td>
                    <td align="right">545212</td>
                    <td align="right">5424121</td>
                    <td align="right">4523131</td>
                    <td align="right">5421</td>
                    <td align="right">541512</td>
                </tr>
                <tr>
                    <td align="center">1</td>
                    <td>empresa</td>
                    <td align="right">5452</td>
                    <td align="right">545212</td>
                    <td align="right">5424121</td>
                    <td align="right">4523131</td>
                    <td align="right">5421</td>
                    <td align="right">541512</td>
                </tr>
                <tr>
                    <td align="center">1</td>
                    <td>empresa</td>
                    <td align="right">5452</td>
                    <td align="right">545212</td>
                    <td align="right">5424121</td>
                    <td align="right">4523131</td>
                    <td align="right">5421</td>
                    <td align="right">541512</td>
                </tr>
                <tr>
                    <td align="center">1</td>
                    <td>empresa</td>
                    <td align="right">5452</td>
                    <td align="right">545212</td>
                    <td align="right">5424121</td>
                    <td align="right">4523131</td>
                    <td align="right">5421</td>
                    <td align="right">541512</td>
                </tr>
                <tr>
                    <td align="center">1</td>
                    <td>empresa</td>
                    <td align="right">5452</td>
                    <td align="right">545212</td>
                    <td align="right">5424121</td>
                    <td align="right">4523131</td>
                    <td align="right">5421</td>
                    <td align="right">541512</td>
                </tr>
                <tr>
                    <td align="center">1</td>
                    <td>empresa</td>
                    <td align="right">5452</td>
                    <td align="right">545212</td>
                    <td align="right">5424121</td>
                    <td align="right">4523131</td>
                    <td align="right">5421</td>
                    <td align="right">541512</td>
                </tr>

            <thead>
                <tr>
                    <th colspan="2" style="text-transform: uppercase;"> Total</th>
                    <th align="right">6532</th>
                    <th align="right">121</th>
                    <th align="right">54213</th>
                    <th align="right">545212</th>
                    <th align="right">21212</th>
                    <th align="right">5452121</th>
                </tr>
            </thead>
        </tbody>
    </table>


</body>
</html>

0

3 respuestas 3

1

Solo pon en tus estilos

thead
{
  position: fixed;
}
1
  • En realidad seria bueno primero probar el codigo; nada mas aplicar position: fixed destruye el estilo de la tabla
    – IvanS95
    Commented el 27 mar. 2019 a las 21:33
0

Puedes poner en el css:

EDITADO

table.tablaordenada thead{
  position: fixed;
}

Esto hace q al scrollear en al pagina, quede el item "pegado" arriba.

1
0

Depende del contexto de la página que estés trabajando, pero si solo tienes la tabla en la página agrega el siguiente css:

table.tablaordenada thead{
   position: fixed;
   top:0px; /* Este lo modificas dependiendo de que altura de la pantalla quieres que se fije el contenedor*/
   left:0px;  /* Estos dos son para centrar el contenedor*/
   right:0px;
}

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.