Ajouter la barre de défilement à la table angulaire

J'ai code suivant pour la table angulaire. Je veux une barre de défilement verticale uniquement pour corps de table (lignes de la table à l'exclusion de l'en-tête) comment puis-je le faire?

Depuis Toutes les lignes sont générées par ng-repeat. Je ne sais pas comment ajouter débordement de style.

html:

            <div class="nu-table">
                <div class="nu-table-row nu-header">
                    <div class="nu-table-cell">A</div>
                    <div class="nu-table-cell" style="width: 33%">B</div>
                    <div class="nu-table-cell" style="width: 34%">C</div>
                </div>
                <div class="nu-table-row nu-striped pointer-cursor" ng-repeat=" map in mapList">
                    <div class="nu-table-cell"  ng-bind="map.A"></div>
                    <div class="nu-table-cell">{{map.B}}</div>
                    <div class="nu-table-cell" ng-bind="map.C"></div>
                </div>
            </div>

Suivant est le CSS du contenu:

.nu-border-table{
border: solid 1px #ccc; 
}
.nu-border{
border: solid 1px #ccc;
}
.nu-table{
background-color: #fff;
padding: 5px;
overflow: scroll;
display: table;
table-layout: fixed;
width: 100%;
}
.nu-table-row{
display: table-row;
position: relative;
width: 100%;
}
.nu-table-row:hover{
background-color: #cee6fa;
}
.nu-table-row.nu-striped.selected{
background-color: #cee6fa;
}
.nu-table-row:last-child{
border-bottom: none;
}
.nu-margin{
margin:5px;
}
.nu-table-cell{
display: table-cell;
border-right: solid 1px #ccc;
border-top: solid 1px #ccc;
min-height: 2em;
padding-top: .3em;
position: relative;
word-wrap: break-word;
padding-left: 2px;
}
.nu-table-cell:last-child{
border-right: none;
}
.nu-striped:nth-child(even) {
background-color: #f9f9f9;
}
.nu-striped:nth-child(even):hover{
background-color: #cee6fa;
}
.nu-header {
background-color: #dedede;
border-bottom: solid 2px #bebebe;
font-weight: bold;
}

qui est le "corps" que vous consultez?
Par "corps", je voulais dire les lignes de la table à l'exclusion de l'en-tête.

InformationsquelleAutor Anush | 2015-02-05

Essayez d'ajouter un div autour des lignes (pas testé):

    <div class="nu-table">
<div class="nu-table-row nu-header">
<div class="nu-table-cell">A</div>
<div class="nu-table-cell" style="width: 33%">B</div>
<div class="nu-table-cell" style="width: 34%">C</div>
</div>
<div class="nu-table-body">
<div class="nu-table-row nu-striped pointer-cursor" ng-repeat=" map in mapList">
<div class="nu-table-cell"  ng-bind="map.A"></div>
<div class="nu-table-cell">{{map.B}}</div>
<div class="nu-table-cell" ng-bind="map.C"></div>
</div>
</div>
</div>

et css (réglage de la hauteur que vous voulez)

.nu-table-body {
overflow-y:auto;
max-height:500px;
}

InformationsquelleAutor Thierry

Vous pouvez placer deux div où 1ère div (en-Tête) auront transparence de la barre de défilement et de la 2e div seront données avec visible/automatique de la barre de défilement. L'échantillon a angulaires extrait de code pour faire une boucle à travers les données.

Ci-dessous le code a fonctionné pour moi -

<div id="transparentScrollbarDiv" class="container-fluid" style="overflow-y: scroll;">
<div class="row">
<div class="col-lg-3 col-xs-3"><strong>{{col1}}</strong></div>
<div class="col-lg-6 col-xs-6"><strong>{{col2}}</strong></div>
<div class="col-lg-3 col-xs-3"><strong>{{col3}}</strong></div>
</div>
</div>
<div class="container-fluid" style="height: 150px; overflow-y: auto">
<div>
<div class="row" ng-repeat="row in rows">
<div class="col-lg-3 col-xs-3">{{row.col1}}</div>
<div class="col-lg-6 col-xs-6">{{row.col2}}</div>
<div class="col-lg-3 col-xs-3">{{row.col3}}</div>
</div>
</div>
</div>

Style supplémentaires pour masquer l'en-tête barre de défilement -

<style>
#transparentScrollbarDiv::-webkit-scrollbar {
width: inherit;
}
/* this targets the default scrollbar (compulsory) */
#transparentScrollbarDiv::-webkit-scrollbar-track {
background-color: transparent;
}
/* the new scrollbar will have a flat appearance with the set background color */
#transparentScrollbarDiv::-webkit-scrollbar-thumb {
background-color: transparent;
}
/* this will style the thumb, ignoring the track */
#transparentScrollbarDiv::-webkit-scrollbar-button {
background-color: transparent;
}
/* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */
#transparentScrollbarDiv::-webkit-scrollbar-corner {
background-color: transparent;
}
/* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */
</style>

InformationsquelleAutor Prateek Rai

Vous devez vous connecter pour publier un commentaire.