Plateforme Level Extreme
Abonnement
Profil corporatif
Produits & Services
Support
Légal
English
Table's footer always at the bottom fixed place
Message
De
09/12/2014 12:58:11
 
 
Information générale
Forum:
CSS
Catégorie:
Autre
Divers
Thread ID:
01611993
Message ID:
01612069
Vues:
52
This message has been marked as a message which has helped to the initial question of the thread.
>>>>>Hi everybody,
>>>>>
>>>>>I have a table in my form with a footer (tfoot). The table has lots of rows, but I want its footer to always show at the same place and have the body of the table to be scrollable.
>>>>>
>>>>>Is it possible? If yes, how should I set my table?
>>>>>
>>>>>Thanks in advance.
>>>>
>>>>There's a dozen or more angular table/gird components - what are you using ?
>>>
>>>We're now using just a table with ng-repeat although based on our own class. This is what I found in our css in regards to that class and tried to adjust but got only some bad effects instead:
>>>
>>>
>>>.table-list {
>>>    cursor: pointer;   
>>>}
>>>
>>>    .table-list > tbody > tr:nth-child(odd) > td {
>>>        background-color: #f1f1f1;
>>>    }
>>>
>>>    .table-list > tbody > tr:hover > td, .table-hover > thead > tr > th:hover {
>>>        background-color: #e9e9e9;    
>>>    }
>>>
>>>    /*.table-list >tbody
>>>    {
>>>        margin: 5px 0 0 0px;		
>>>		overflow-y: scroll;
>>>		height: 60%;
>>>		border-bottom: 0;		
>>>		margin: 0 auto;
>>>    }*/
>>>
>>>    .table-list > tfoot {
>>>         font-size:large;
>>>         text-align:right;   
>>>         
>>>    }
>>>
>>>
>>>BTW, I added tfoot class. I can make tfoot to always show at the bottom, but I can not make the rest of the table to not show behind (e.g. in a scrollable box right above the footer).
>>
>>Then maybe something based on this: http://jsfiddle.net/Gabriel_Mendez/T2pmq/
>
>This is what I looked at yesterday too. But you can see he is not using table there at all.

The principal is the same : make the body section 'overflow:auto;'. Example using a table here: http://jsfiddle.net/venkateshwar/5KJka/1/
Just add the footer - it will work
Précédent
Suivant
Répondre
Fil
Voir

Click here to load this message in the networking platform