Header and table foot immobilized when scrolling

Navigation
1

Could someone help me how to make the header and footer of the table immobilized with CSS or javascript when scrolling? 

<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>
    
asked by Andy Giampierre Ordoñez Vega 09.04.2018 в 17:21
source

1 answer

0

You can put in the css:

EDITED 

table.tablaordenada thead{
  position: fixed;
}

This causes scrolling on the page, leaving the item "stuck" up.

    
answered by 09.04.2018 в 18:42
Display a DialogFragment from an Adapter RecyclerView highChart dynamic graphics, irregular time intervals