web-dev-qa-db-fra.com

barre de défilement pour une cellule de tableau

Existe-t-il un moyen d'ajouter une barre de défilement à une balise 'td'? J'ai un contenu dynamique dans une balise 'td'. Je veux que le "td" soit de taille fixe et si le contenu devient plus grand que la taille "td", je veux qu'une barre de défilement apparaisse uniquement sur cette cellule particulière. Existe-t-il un moyen d'y parvenir?

htmlhtml5scrollbarhtml-table
27
Prasanna

Oui, tu peux faire ça.

La façon la plus simple est de mettre à l'intérieur de votre cellule une div en la remplissant et de définir sa propriété de style overflow.

CSS: 

div.scrollable {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: auto;
}

HTML: 

<td><div class=scrollable>
    Some content with a scrollbar if it's too big for the cell
</div></td>

Si vous souhaitez que la barre de défilement soit toujours visible, même lorsque le contenu n'est pas rogné, remplacez auto par scroll dans le CSS.

Démonstration

35
Denys Séguret
<table  width ="400" >
    <tr>
        <td >
            <div style="width:100%; max-height:300px; overflow:auto">Your content here 
             </div>
        </td>
    </tr>
</table>

http://jsfiddle.net/7T2S4/1/

J'espère que cela t'aides

12
Parag

Vous devriez avoir besoin de fournir soit "hauteur" soit "largeur" ​​de l'élément div, afin qu'il défile en conséquence. par exemple, vous souhaitez appliquer le défilement vertical (axe Y): -

<td><div class="scrollable">
    Some content with a scrollbar if it's not fit in your customized container
</div></td>

div.scrollable
{
width:100%;
height: 100px;
margin: 0;
padding: 0;
overflow-y: scroll
}
3
gopal sharma